这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天

由于组件库项目用到webpack，所以我就用webpack

这个配置比较麻烦，首先就是有五大概念。

入口(entry)

需要打包的文件的入口，值的格式有两种 字符串：只有一个入口文件，直接用字符串表示即可。 多文件：多个入口文件，需要用对象去配置，key为入口文件的名字(这个key也代表了[name]的名字),value为一个配置对象或者一个字符串入口地址。

entry: {
            // 对象形式，key代表打包入口后的[name]
            index: "./examples/index.ts",
        },

出口(output)

打包文件的输出的位置以及名字等等。 值的格式是一个对象，常用的有

output:{
    filename:"[name].js",
    path:path.resolve(__dirname,"dist"),
    clean:true,
    library:{
        name:"dzUI",
        type:"umd"
    }
}

加载器(loader)

loader用于对模块的源代码进行转换，loader可以使你在webpack中打包不同类型的文件，比如css，less，它在module中rule配置。格式如下

    module:{
        rules:[
            {
                test:/\.文件类型/
                use:可以是字符串，可以是数组，数组里面可以是字符串，也可以是一个配置对象
            }
        ]
    }

Tip:loader的顺序是逆序执行。

插件(plugin)

插件在webpack中是这样说的，插件的目的是解决loader无法实现的其它事。

我的理解是，loader负责webpack无法识别的文件类型。而这个plugin是为webpack增加除了识别文件类型的功能。比如常用的有new HtmlWebpackPlugin

格式是一个数组，数组元素是插件实例

模式(mode)

mode代表打包模式，有生产模式：production。有开发模式：development。默认值是production 开发模式往往是项目开发的时候使用，一般会使用dev-serve&opimazation&sourceMap。 生产模式下就不需要dev-server&sourceMap等东西，一般会使用opimazation和tree shaking

tree shaking的意思就是去掉引用了但没实际使用的代码，但我们要考虑副作用。如果有副作用的文件就不能去tree shaking它。