# 开发环境优化配置

# HMR

当开启了 devServer 后，如果修改项目中的某一模块，那么整个项目将会被全部重新打包。如果是一个庞大的项目，那么没修改一点点就需要全部打包，消耗大量时间。由此使用 HMR ( hot module replacement 热模块替换 / 模块热替换) 来只进行性修改部分的更新打包，加快开发进度。

首先需要把 webpack.config.js 文件中的 devServer 的 hot 字段设置为true 开启 HMR 功能。

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

1
2
3
4
5
6
7
8
9

# 处理样式文件

在使用 style-loader 对样式文件进行处理时，由于 style-loader 已经实现了默认支持 HMR ，不需要任何操作。修改某一个 css 文件只会对这个文件进行更新打包，对其他模块没有影响。

# 处理 js 文件

在 js 文件中添加如下代码

  import print from './print';

  // ...

  if (module.hot) {
    // 一旦 module.hot 为true，说明开启了HMR功能。 --> 让HMR功能代码生效
    module.hot.accept('./print.js', function() {
      // 方法会监听 print.js 文件的变化，一旦发生变化，其他模块不会重新打包构建。
      // 会执行后面的回调函数
      print();
    });
  }

1
2
3
4
5
6
7
8
9
10
11
12

通过 module.hot 获取 webpack.config.js 中的 devServer 的 HMR 知否开启。通过监听所引用文件的更新，更新后执行回调函数。达到修改引入文件只会对这个文件进行更新打包，对其他模块没有影响。HMR功能对 js 的处理，只能处理非入口 js 文件的文件。

# 处理 html 文件

开启 HMR 后 html 文件的修改之后没有办法进行更新。在 webpack 配置入口文件加入 index.html 的路径即可解决问题。html 文件不需要做 HMR 处理，以为项目中只有一个 html。

 entry: ['./src/index.js', './public/index.html'],

# source-map

source-map : 一种提供源代码到构建后代码的映射技术（如果构建后代码出错了，通过映射在浏览器调试工具中可以追踪源代码错误位置）在 webpack 配置文件中通过对 devtool 字段进行配置。

devtool: [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map

# 配置组合解释

组合	生成 sourceMap 文件	解释	构建的速度	重新构建的速度
`source-map`	在 `build.js` 外部生成一个 `sourceMap` 文件	错误代码准确信息、源代码的错误位置（行列）	慢	慢
`inline-source-map`	生成一个 `sourceMap` 追加在 `build.js` 后面	错误代码准确信息、源代码的错误位置（行列）	慢	慢
`hidden-source-map`	在 `build.js` 外部生成一个 `sourceMap` 文件	不能追踪源代码、只能提示到构建后代码的错误位置（行列）	慢	慢
`eval-source-map`	每一个文件都生成对应的 `sourceMap` 都在 `build.js` 的 `eva`l 函数中	错误代码准确信息、源代码的错误位置（行列）	慢	比较快
`nosources-source-map`	在 `build.js` 外部生成一个 `sourceMap` 文件	错误代码准确信息、但是没有任何源代码信息	慢	慢
`cheap-source-map`	在 `build.js` 外部生成一个 `sourceMap` 文件	错误代码准确信息、源代码的错误位置（行）	比较快	中等
`cheap-module-source-map`	在 `build.js` 外部生成一个 `sourceMap` 文件	错误代码准确信息、源代码的错误位置（行）`module` 会将 `loader` 的 `source map` 加入	中等	比较慢

# 使用选择

开发环境：速度快，调试更友好。使用 eval-source-map / eval-cheap-module-souce-map

生产环境：源代码要不要隐藏? 调试要不要更友好？不使用内联的 sourceMap 内联会让代码体积变大。

要考虑隐藏代码：使用 hidden-source-map 只隐藏源代码，会提示构建后代码错误信息、nosources-source-map 全部隐藏。不考虑隐藏代码：source-map / cheap-module-souce-map

Leo`s TechStack

Choose mode

webpack 开发环境优化