在开发环境配置：
热模块替换： 一个模块发生变化，只会重新打包，而不是打包所有模块，极大提升打包速度 js文件和html默认不能使用hmr功能
在development属性中添加 hot:true 开启HMR功能 当修改了webpack配置 新的配置要想生效。必须重新启动webpack服务
source-map: 一种提供源代码到渐渐后代映射技术(如果构建后代码出错了，通过映射可以追踪源代码错误) 错误代码的准确信息和源代码的错误位置 添加devtool属性
inline-source-map 内联 错误代码的准确信息和源代码的错误位置
hidden-source-map 外部 错误代码的错误原因 没有错误位置 不能追踪到源代码的错误只能提示到构建后代码的位置
eval-source-map
nosources-source-map 外部 错误代码准确信息，但是没有任何源代码信息 隐藏源代码
cheap-source-map 错误代码准确信息和源代码错误位置 只能精确到行
cheap-module-source-map 错误代码准确信息和源代码错误位置
开发环境: 速度快 调试更友好
速度快: 1.eval-chearp-souce-map 2.eval-source-map
调试更友好: 1.souce-map 2.cheap-module-souce-map 3.cheap-souce-map
生产环境： 源代码要不要隐藏
nosources-source-map 全部隐藏
hidden-source-map 只隐藏源代码，会提示构建后代码错误信息
oneof： 一个文件只能被一个loader处理 当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序
先执行eslint 再执行babel
缓存： cacheDirectory：true 让第二次打包构建速度更快
hash：每次webpack构建时会产生一个唯一的hash值
重新打包会导致所有缓存失效
chunkhash：根据chunk生成的hash值 如果打包来源于同一个chunk，namehash值就一样
contenthash：根据文件的内容生成hash值 不同文件hash值不一样
tree shaking： 去除无用代码
前提： 必须使用ES6模块化 开启production环境
作用：减少代码体积
在package.json中配置
“sideEffects”：fals 所有代码都可以进行tree shaking 问题 ：可能会把css /@babel/polyfill 文件干掉
“sideEffects”:["*.css","*.less"]