如何让Webpack打包生成未压缩的bundle.js文件？

嘿，作为Webpack新手碰到这个问题太正常啦～我看了你的配置文件，问题核心在于当前项目默认启用了生产模式下的压缩优化插件，所以生成的bundle.js是经过压缩混淆的。下面给你几个实用的解决办法：

方法一：直接切换到开发模式 #

你的配置里通过environment.production变量控制打包模式，现在它被设为true，所以Webpack加载了带压缩插件的生产环境配置。只需要把这个变量改成false，就能直接生成未压缩的bundle.js：

// 修改这一行
environment = { production: false };

修改后，Webpack会自动使用development入口和插件数组——这里面没有启用UglifyJsPlugin（压缩混淆的核心插件），同时devtool会开启sourcemap，方便你调试代码。

方法二：调整生产环境配置（保留生产模式但禁用压缩） #

如果你偶尔需要生产模式，但这次想生成未压缩的文件，可以直接修改production插件数组，移除压缩相关的插件：

production = [
  HTMLWebpackPluginConfig,
  // 移除压缩/优化插件
  // new webpack.optimize.DedupePlugin(),
  // new webpack.optimize.OccurenceOrderPlugin(),
  new webpack.DefinePlugin({
    'process.env': {
      // 也可以改成development，避免第三方库启用生产模式的压缩逻辑
      NODE_ENV: JSON.stringify('development')
    }
  }),
  // 移除压缩混淆插件
  // new webpack.optimize.UglifyJsPlugin({ mangle: true, sourcemap: false })
];

小提醒：OccurenceOrderPlugin应该是OccurrenceOrderPlugin（拼写小错误），不过这个插件在Webpack4+已经被默认启用，旧版本移除它也不会影响基础打包流程。

方法三：升级Webpack到4+（更简洁的方式） #

如果你的项目允许升级Webpack版本，Webpack4+引入了mode选项，能一键切换模式，不用手动管理复杂的插件数组：

module.exports = {
  mode: 'development', // 启用开发模式，自动禁用所有压缩优化
  devtool: 'sourcemap',
  entry: './src/index.js', // 可以简化入口配置
  output: {
    path: path.join(__dirname, 'build/dist'),
    filename: 'bundle.js'
  },
  // 其他配置...
};

mode: 'development'会自动保留代码的可读性，同时禁用所有压缩混淆逻辑，非常适合开发调试场景。

最后别忘了，修改完配置后重新运行Webpack打包命令，新的未压缩bundle.js就会生成啦～

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