Webpack开发环境与生产环境的行为差异及配置相关咨询

Great question! Let’s break down the key differences between Webpack’s behavior in development vs. production, and tie each point back to your current configuration files.

1. 代码优化与体积控制 #

• 生产环境：Webpack会自动启用一系列性能优化：
  • 代码压缩：通过TerserPlugin压缩JS代码（移除冗余空格、混淆变量名等），大幅缩小bundle体积。
  • Tree Shaking：因为你的package.json里设置了"sideEffects": false，生产环境会利用这个标记安全移除未被引用的代码（比如某个模块里从未调用过的函数）。
  • 作用域提升：用ModuleConcatenationPlugin把多个模块合并到同一个作用域，减少代码包裹层级，提升运行效率。
• 开发环境：这些优化全部关闭，目的是让代码保持可读性，方便你调试，同时加快构建速度。

Looking at your current webpack.config.js, you haven’t set a mode option—Webpack defaults to production mode if you don’t specify one. That means right now, your build is already applying production optimizations, even if you’re using it for development!

2. Source Map 生成 #

• 开发环境：需要清晰、快速的source maps来定位代码问题，常用配置比如devtool: 'eval-cheap-module-source-map'，它能把编译后的代码映射回原源码，且构建速度快。
• 生产环境：默认生成source-map类型的独立文件，既保留调试能力，又不会把源码直接暴露在bundle里。你也可以用hidden-source-map完全隐藏源码映射，仅用于内部调试。

Your current config doesn’t include a devtool setting, so in development mode you’ll miss out on easy debugging, and in production you’ll get the default source-map behavior.

3. 构建速度与调试体验 #

• 开发环境：优先考虑构建速度和调试便利性：
  • 启用缓存（cache: true），重复构建时只编译修改过的模块。
  • 支持模块热替换（HMR），修改代码后无需刷新整个页面，只更新变化的模块。
  • 不对代码做任何混淆，变量名和原代码完全一致。
• 生产环境：优先考虑输出代码的性能和体积，构建速度是次要的，所以不会启用HMR，也不会保留开发时的临时缓存（除非你手动配置长期缓存策略）。

Your current setup doesn’t include HMR or caching, so development builds will be slower than they need to be.

4. 输出文件的缓存策略 #

• 生产环境：通常会给输出文件名添加哈希值，比如filename: 'bundle.[contenthash].js'。这样当代码变化时，哈希值会更新，浏览器会加载新文件，避免缓存旧代码。
• 开发环境：用固定的文件名（比如你现在的bundle.js）就够了，因为不需要长期缓存，而且方便在浏览器里调试。

Your current output.filename is set to bundle.js—this works fine for development, but for production you should add a content hash to enable long-term caching.

如何修改你的配置来区分环境 #

最简单的方式是在package.json的scripts里添加环境指令：

{
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  }
}

如果你需要更复杂的环境配置（比如不同的插件、devtool设置），可以用webpack-merge拆分配置：

• 创建webpack.common.js存放公共配置（比如你的entry、output、module规则）
• 创建webpack.dev.js和webpack.prod.js分别存放开发和生产环境的专属配置，然后用webpack-merge合并公共配置。

举个例子，webpack.dev.js可以这样写：

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'eval-cheap-module-source-map',
  devServer: {
    static: './dist',
    hot: true
  }
});

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