【voice-ui】从零开始搭建，配置webpack

临近校招，因无实习，还非科班，想给简历加分，故只能自己做项目，但类似后台管理系统、购物商城的都已经烂大街了，所以尝试一下能不能做点难度稍微高一点的ui组件库

环境配置

建立仓库

在github上建立fun ui仓库，注意现在github上默认的分支不是master了，我克隆到本地的后，练习上传到另一个地址时，发现不用master了，是main分支

在建立的时候勾选了，为仓库创建README文件和 .gitignore文件，
.gitignore文件，在里面写了的文件，不会被git工具进行更新，比如后续会将 dist文件下的所有文件都不进行推送，只在本地就行

初始环境配置

在终端输入

npm init -y

生成package.json

根目录下新建lib文件夹，lib文件夹下新建index.tsx

首先要说明的是，浏览器不支持Ts，所以要用webpack把Ts转换成Js

配置webpack

首先先下载webpack，进官网查看如何安装webpack

这里我们用yarn add，比npm命令稳定一些
webpack用4.29.6版本 webpack-cli用3.2.3
–save-dev的意思是开发者模式，这个依赖是给程序员用的，打包后不会放到包里

yarn add webpack@4.29.6 webpack-cli@3.2.3 --save-dev

在这里简单复习一下-dev
在npm命令里，- -save-dev是给程序员用的，即开发环境development，- -save是给用户用的，什么都不写，默认是- -save，
在yarn命令里，可以直接默认不写 - -save，写

yarn --dev

其次- -save可以简写为-S
–dev可以简写为-D

以下为配置文件，注释写的还是比较详细，
不过还得安装以下依赖

“webpack-dev-server”: “^3.11.2”
“typescript”: “^4.3.4”,
“awesome-typescript-loader”: “^5.2.1”,
“html-webpack-plugin”: “3.2.0”,

// webpack的配置文件
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
   
    // 配置mode环境。生产环境是production上线给用户用，会压缩代码，超过244k会警告，开发环境是development
    mode: 'development',
    // 入口文件,键名index就是外部要找的根目录下的文件名,默认找html后缀
    // 键值就是要转换的那个文件的地址，经过webpack的转换，写进index.html里面
    entry: {
   
        index: './lib/index.tsx'
    },
    // 支持的后缀，不然在import的时候，不写tsx就找不到tsx文件
    resolve:{
   
        extensions:['.ts','.tsx','.js','.jsx'],
    },
    // 输出目录，要用到绝对路径，所以在上方引入path模块
    output: {
   
        // 路径
        path: path.resolve(__dirname, 'dist/lib'),
        // 库的名字
        library: 'FunUI',
        // 库的目标格式 , 这个是跟cmd，amd类似的一种模块化
        libraryTarget: 'umd'
    },
    // 配置loader
    module: {
   
        rules: [
            {
   
                //  //表示正则， .要用转义\  ?表示x可有可无  $表示以这个结尾
                test: /\.tsx?$/,
                // loader有多种多样，这里用的是其中一个比较好的，一般都是直接输名字然后--dev安装
                loader: 'awesome-typescript-loader'
            }
        ]
    },
    // 配置plugin
    plugins: [
        // 用于生成html里面的script src标签，引入经过转换的ts文件
        new HtmlWebpackPlugin({
   
            title: 'FunUI - React',
            // 引入进index.html文件里
            template: 'index.html'
        })
    ],
    // 用于将react包排在外面，让其他开发者自己下载，不然这个太大了
    externals: {
   
        react: {
   
            // 对应的模块化标准，该怎么引用，比如require('xxx')，这个xxx就是下面的'react'
            commonjs: 'react',
            commonjs2: