Webpack5开发模式下如何条件配置devtool生成可读JS并支持调试

完全适配你目前通过npm脚本传--mode参数的构建流程，不需要改动package.json里的现有命令，直接在配置文件中做条件判断即可，不会干扰生产构建的默认优化逻辑。

最简可直接复用的配置片段 #

Webpack 5支持将配置文件导出为函数形式，函数可以自动接收命令行传入的参数，包括我们设置的mode值：

// webpack.config.js
const path = require('path');

module.exports = (env, argv) => {
  // 判断当前是否为开发模式构建
  const isDev = argv.mode === 'development';

  return {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
      clean: true
    },
    // 仅开发模式下自定义devtool配置
    devtool: isDev
      // 选不带eval逻辑的devtool，从根源消掉默认的警告提示
      ? 'cheap-module-source-map'
      // 生产模式不自定义，完全沿用Webpack生产构建的默认规则
      : false
    // 其余原有配置保持不变即可
  }
}

配置选择的原因 #

• 选cheap-module-source-map作为开发模式的devtool：
  • 完全不使用eval包裹模块代码，生成的JS文件没有eval语句，开发者可以直接打开bundle文件阅读完整内容，同时彻底移除默认带的ATTENTION警告
  • 生成的sourcemap可以直接被Chrome DevTools识别，支持在Sources面板对原始源文件打断点、逐行调试，适配常规开发的调试习惯
  • 相比全量source-map配置，这个选项的开发构建速度更快，不会拖慢日常开发的迭代效率
• 生产模式将devtool设为false：
  当执行--mode production构建时，Webpack会自动启用全套生产优化（代码压缩、Tree-Shaking、静态资源哈希等），这个自定义配置不会覆盖默认的生产优化逻辑，不会影响生产产物的体积和运行性能。

可选调整 #

如果你需要更细粒度的sourcemap映射、不介意稍慢的开发构建速度，可以将开发模式下的devtool值替换为source-map，同样满足文件可读、支持Chrome调试的要求，也不会出现eval相关的警告提示。

验证方式：执行npm run build-dev后，打开生成的JS文件，开头不会再出现eval相关的提示；启动本地开发服务后打开Chrome调试面板，即可正常映射源文件开展断点调试。

内容的提问来源于stack exchange，提问作者dfrankow