开发环境优化
- HMR 模块热替换
- devServer设置hot: true
- style-loader 已实现
- webpack.HotModuleReplacementPlugin
- source map
- 建立源码与构建代码之间的映射关系，快速定位错误在源码中的位置
生产环境优化（构建时优化 & 运行时优化）
- 缓存策略
- 配置babel-loader时，设置cacheDiretory为true，开启babel缓存，之后webpack在打包时，只会对修改过的模块重新编译，其他模块读取babel缓存中的即可
- 配合静态资源缓存策略，webpack要在输出文件名称上加hash
- Tree Shaking
- webpack在打包时，会自动去掉引用了但未使用的模块
- sideEffects，在直接 import 模块名称时， webpack无法判断引入的模块是否有用，因为即使没有导出值，但也可能修改了全局对象，所以对这些模块，都不会执行Tree Shaking，我们可以在package.json中配置sideEffects告诉webpack哪些模块是有作用的，而其他模块则是无用的
- Code Spliting
- 多入口，多出口 打包
- optimization.splitChunks.chunks: 'all' 将node_modules中模块单独打包
- import()
- 减少参与构建的代码
- 使用externals 外部链接，告诉webpack哪些node_modules模块不需要参与打包，之后在html模板文件中将该资源以script标签形式引入，CDN
- DLL动态链接库，将指定几个node_modules模块打包成一个dll，并告诉webpack在构建时不需要再打包这几个模块，之后在html文件中手动引入dll
- 减小构建出代码的体积
- webpack.UglifyJsPlugin
- OptimizeCssAssetWebpackPlugin
- HtmlWebpackPlugin
- 多进程打包
- thread-loader
- HappyPack
