四、Webpack 开发环境的配置优化

六、开发环境 配置优化

---

1. HMR（模块热替换）

HMR: hot module replacement 热模块替换 / 模块热替换

作用：一个模块发生变化，只会重新打包构建这一个模块（而不是打包所有模块） ，极大提升构建速度

缺点：1.此HRM功能只对样式css文件有效，对js无效 2.会让html失去热更新功能

• 如果想要js文件实现HRM功能，则需要修改一些代码，但对入口js文件不适用(入口js文件修改，还是会全部打包)

• 如果想要html有效，则需要再entry入口里面，将html文件引入 entry: [’./src/js/index.js’, ‘./src/index.html’],

代码：只需要在 devServer 中设置 hot 为 true，就会自动开启HMR功能（只能在开发模式下使用）

//webpack.config.js文件

devServer: {
  contentBase: resolve(__dirname, 'build'),
  compress: true,
  port: 3000,
  open: true,
  // 开启HMR功能
  // 当修改了webpack配置，新配置要想生效，必须重启webpack服务
  hot: true
}

//注：此HRM功能只对样式css文件有效，对js文件(js修改，还是会全部重新打包)和 html失去热更新功能
   如果想要js文件实现HRM功能，则需要修改一些代码，但对入口js文件不适用(入口js文件修改，还是会全部打包)
   如果想要html有效，则需要再entry入口里面，将html文件引入 entry: ['./src/js/index.js', './src/index.html'],

2. Source-Map 代码错误调试

source-map: 如果代码构建后出错了，通过映射可以追踪个源代码错误

他有内联和外部两种：

• 内联构建速度更快，但生成了一些文件，会让包体积变大 (适合开发环境)
• 外部慢，但不会生成文件(适合生产环境)

有多种前缀取值：[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map

source-map：外部 有错误代码准确信息，有源代码的错误位置
cheap-source-map：外部 有错误代码准确信息，有源代码的错误位置 但只能精确的行
hidden-source-map：外部 有错误代码错误原因，没有错误位置 不能追踪源代码错误，只能提示到构建后代码的错误位置
nosources-source-map：外部 有错误代码错误原因, 无任何源代码信息
heap-module-source-map：外部 有错误代码准确信息，有源代码的错误位置 module会将loader的source map加入
inline-source-map：内联 有错误代码准确信息，有源代码的错误位置 只生成一个内联source-map
eval-source-map：内联 有错误代码准确信息，有源代码的错误位置 每一个文件都生成对应的source-map，都在eval

速度：eval>inline>cheap>…


开发环境：eval-source-map / eval-cheap-module-souce-map

生产环境：source-map / cheap-module-souce-map

//webpack.config.js文件

//...

devtool: source-map'  //开发环境使用 eval-source-map  生产环境使用source-map

// 生产环境
mode: 'production',