面试题：Webpack 多环境配置中如何区分开发环境与生产环境

Question

在 Webpack 配置文件的多环境管理场景下，通常需要区分开发环境和生产环境。请描述你会采用哪些方法来实现这种区分，比如从配置文件结构、参数设置等方面进行阐述。

Answer 1

1. 使用不同的配置文件

• 结构：创建多个 Webpack 配置文件，如 webpack.common.js 存放通用配置，webpack.dev.js 用于开发环境，webpack.prod.js 用于生产环境。
• 使用方式：在 package.json 中设置不同的脚本，例如：

{
  "scripts": {
    "dev": "webpack --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
  }
}

2. 使用环境变量

• 配置文件结构：在单个 Webpack 配置文件（如 webpack.config.js）中，通过 process.env.NODE_ENV 来判断当前环境。
• 参数设置：在 package.json 的脚本中设置环境变量，例如：

{
  "scripts": {
    "dev": "NODE_ENV=development webpack",
    "build": "NODE_ENV=production webpack"
  }
}

然后在 webpack.config.js 中：

const isProduction = process.env.NODE_ENV === 'production';
module.exports = {
  // 其他配置
  mode: isProduction? 'production' : 'development',
  // 根据环境设置其他不同参数，如 devtool
  devtool: isProduction? false :'source - map'
};

3. 使用工具辅助

• 如 webpack - merge：先在 webpack.common.js 中定义通用配置：

module.exports = {
  // 通用配置项
  entry: './src/index.js',
  module: {
    rules: [
      // 通用规则
    ]
  }
};

然后在 webpack.dev.js 中：

const merge = require('webpack - merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
  mode: 'development',
  devtool:'source - map',
  // 开发环境特有配置
});

在 webpack.prod.js 中：

const merge = require('webpack - merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
  mode: 'production',
  // 生产环境特有配置，如压缩代码等
});