devtool 选项

devtool 选项控制是否生成和如何生成 source map。 :::info devtool 的配置只需要在 webpack.config.js 文件中添加 devtool 配置项即可。 :::

比如：

// webpack.config.js
module.exports = {
     entry: '',
  // ...
  // 配置 source map, 默认值为 none
  devtool: "cheap-module-eval-source-map" 
}

devtool	构建速度	重新构建速度	生产环境	品质
none	+++	+++	yes	打包后的代码
eval	+++	+++	no	生成后的代码
cheap-eval-source-map	+	++	no	转换过的代码（仅限行）
cheap-module-eval-source-map	o	++	no	原始源代码（仅限行）

:::warning devtool 的其他可选值可参考webpack官网 :::

如何选择 devtool 的值

开发环境推荐：cheap-module-eval-source-map

生产环境推荐：none（不使用source map）

使用 cheap 模式的可以大大提高 source map 生成的效率。
使用 module 可支持babel 这种预编译工具，映射转换前的代码
使用 eval 方式可大幅提高持续构建效率。
使用 eval-source-map 模式可以减少网络请求。这种模式开启DataUrl 本身包含完整 sourcemap 信息，不需要像 sourceURL 那样，浏览器需要发送一个完整请求去获取 sourcemap 文件，这会略微提高点效率。而生产环境中则不宜用 eval，这样会让文件变得极大。