webpack

1. 基本编译配置

1. html编译（HtmlWebpackPlugin）
2. css编译
   • less编译（less-loader）
   • scss编译（scss-loader）
   • vue样式编译（vue-style-loader）
   • css编译（css-loader、style-loader）
   • 多浏览器兼容（postcss-loader）
3. js编译
   • vue编译(vue-loader)
   • react编译(babel-loader)
   • babel-loader
     • 预设，比如箭头函数转为function(@babel/preset-env、@babel/preset-react)
     • 新语法补丁polyfill，比如(core.js,generator)
     • 按需引入polyfill（useBuiltIns、corejs）
     • 是否是第三方库，写页面无需配置（run-time）
4. img编译（file-loader）

2. 开发环境编译配置

1. 热更新，热部署（HotModuleReplacementPlugin）
2. 加速编译dll(webpack/lib/DllPlugin、webpack/lib/DllReferencePlugin)
3. html、css、js、img按照基本配置

3. 生产环境编译配置

1. html编译压缩+hash（HtmlWebpackPlugin）
2. css编译压缩+hash
   • 抽离并hash(MiniCssExtractPlugin)
   • 压缩css（TerserJSPlugin,OptimizeCSSAssetsPlugin)
3. js编译压缩+hash
   • 抽离公共代码(splitChunks)
   • 忽略不常更新的包，比如react.min.js(noParse)
   • 删除包内不需要的，比如只留moment的中文包(IgnorePlugin)
   • 多进程打包、压缩（HappyPack、UglifyJS)
   • 删除无用js（treeshaking自带）
   • 减少闭包scopeHosting(ModuleConcatenationPlugin)
4. img编译压缩(url-loader)

webpack优化

1. 优化构建速度：
   1. 优化babel-loader 开启缓存，明确范围、
   2. IgnorePlugin忽略包内部分文件，比如moment的/locale目录，只要手动导入中文包即可
   3. noParse忽略对完整的min包，比如已有react.min.js，不需要重复打包、
   4. happyPack开启多进程打包，提高构建速度、
   5. ParallelUgifyPlugin开启多进程压缩js、
   6. 自动刷新watchOptions、热更新devServe、不能用于生产环境
   7. DllPlugin动态链接库插件，vue和react体积大但是不常升级版本，一个版本构建一次就可
2. 优化产出代码:
   1. 使用生产环境pro命令，vue和react会自动去除警告，启动代码压缩，启动tree-shaking、
   2. 小图片base64编码、
   3. bundle和hash、
   4. 使用CDN
   5. 提取公共代码、
   6. 懒加载配合动态组件、
   7. scope hosting减少闭包
   8. IgnorePlugin忽略包内部分文件