webpack-merge 实现开发、生产和测试环境的不同配置

使用 webpack-merge 可以方便地合并多个 Webpack 配置对象，从而实现开发、生产和测试环境的不同配置。以下是具体步骤：

1. 安装 webpack-merge

在项目根目录下打开终端，然后运行以下命令：

npm install --save-dev webpack-merge

2. 创建基础配置文件

创建一个基础的 Webpack 配置文件，通常命名为 webpack.common.js。这个文件包含所有环境共享的配置。

例如：

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  // 其他共享配置
};

3. 创建环境特定的配置文件

为每个环境（开发、生产、测试等）创建单独的配置文件。

• 开发环境：通常命名为 webpack.dev.js

// webpack.dev.js
module.exports = {
  mode: 'development',
  devtool: 'inline-source-map',
  // 其他开发环境特定的配置
};

生产环境：通常命名为 webpack.prod.js

// webpack.prod.js
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode: 'production',
  optimization: {
    minimizer: [new TerserPlugin()],
  },
  // 其他生产环境特定的配置
};

测试环境：通常命名为 webpack.test.js（如果需要）

// webpack.test.js
module.exports = {
  // 测试环境特定的配置
};

4. 合并配置

在你的 npm 脚本或构建脚本中，使用 webpack-merge 来合并基础配置和环境特定的配置。

例如，在 package.json 中：

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

 

然后，在每个环境特定的配置文件中，使用 webpack-merge 来合并配置。

例如，在 webpack.dev.js 中：

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

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  // 其他开发环境特定的配置
});

 

5. 运行构建

现在，你可以使用以下命令来为不同的环境进行构建：

• 开发环境：npm run build:dev
• 生产环境：npm run build:prod
• 测试环境：npm run build:test（如果有需要）

这样，你就可以使用 webpack-merge 来管理不同环境下的 Webpack 配置了。这种方式使得配置更加模块化和可维护，同时也方便了多环境下的构建和部署。