一、基本配置
二、webpack配置多入口
三、处理CSS抽离和压缩
四、抽离公共代码和第三方代码
五、异步加载js
六、Module chunk bundle的区别
七、webpack性能优化
八、Tree-Shaking
九、ES6-Module和CommonJS的区别
十、Scope-Hosting

一、基本配置

1. 配置css

2. 配置图片

2.1 使用file-loader

2.2 使用url-loader（通常上线使用url-loader）

3. devServer配置代理

4. 使用webpack-merge合并公共配置，dev配置，production配置

二、webpack配置多入口

1. entry配置多个入口文件

2. 配置output

3. 配置对应的html插件

三、处理CSS抽离和压缩

1. loader中配置抽离CSS

2. plugins中配置输出CSS文件

3. 压缩CSS

3.1 prod

3.2 dev

四、抽离公共代码和第三方代码

optimization: {
        // 压缩 css
        minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
        // 分割代码块
        splitChunks: {
            chunks: 'all',
            /**
             * initial 入口 chunk，对于异步导入的文件不处理
                async 异步 chunk，只对异步导入的文件处理
                all 全部 chunk
             */
            // 缓存分组
            cacheGroups: {
                // 第三方模块
                vendor: {
                    name: 'vendor', // chunk 名称
                    priority: 1, // 权限更高，优先抽离，重要！！！
                    test: /node_modules/,
                    minSize: 0,  // 大小限制
                    minChunks: 1  // 最少复用过几次
                },
                // 公共的模块
                common: {
                    name: 'common', // chunk 名称
                    priority: 0, // 优先级
                    minSize: 0,  // 公共模块的大小限制
                    minChunks: 2  // 公共模块最少复用过几次
                }
            }
        }
    }