Webpack教程系列（九）：Webpack配置拆分与合并

1. 为什么需要配置拆分与合并？

随着项目规模的增大，Webpack 配置文件可能会变得非常复杂，难以维护。配置拆分与合并的目的是：

• 提高可维护性：将配置拆分为多个文件，便于管理和修改。
• 复用配置：提取公共配置，避免重复代码。
• 支持多环境：根据开发、测试、生产等环境动态调整配置。

本文将介绍如何拆分和合并 Webpack 配置。

---

2. 配置拆分

2.1 按功能拆分

将配置按功能拆分为多个文件，例如：

• **webpack.common.js**：公共配置。
• **webpack.dev.js**：开发环境配置。
• **webpack.prod.js**：生产环境配置。

2.1.1 公共配置

在 webpack.common.js 中定义公共配置：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

2.1.2 开发环境配置

在 webpack.dev.js 中定义开发环境配置：

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

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

2.1.3 生产环境配置

在 webpack.prod.js 中定义生产环境配置：

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

module.exports = merge(common, {
  mode: 'production',
  devtool: 'source-map',
  optimization: {
    minimize: true
  }
});

2.2 按环境拆分

如果需要支持更多环境（如测试环境），可以按环境拆分配置：

• **webpack.test.js**：测试环境配置。

---

3. 配置合并

3.1 使用 webpack-merge

webpack-merge 是一个用于合并 Webpack 配置的工具，支持深度合并。

3.1.1 安装 webpack-merge

npm install webpack-merge --save-dev

3.1.2 合并配置

在 webpack.dev.js 和 webpack.prod.js 中使用 webpack-merge 合并配置：

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

module.exports = merge(common, {
  // 环境特定配置
});

3.2 动态选择配置

在 package.json 中通过脚本动态选择配置：

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

---

4. 复用配置

4.1 提取公共 Loader

将公共 Loader 提取到 webpack.common.js 中：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader']
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

4.2 提取公共 Plugin

将公共 Plugin 提取到 webpack.common.js 中：

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

---

5. 总结

本文详细介绍了 Webpack 配置拆分与合并的方法，包括按功能拆分、按环境拆分、使用 webpack-merge 合并配置以及复用公共配置。通过这些技巧，我们可以更好地管理复杂的 Webpack 配置。

在下一篇文章中，我们将深入探讨 Webpack 与其他工具的集成，学习如何将 Webpack 与 ESLint、TypeScript 等工具结合使用。

---

预告：

• 下一篇：Webpack 与其他工具的集成详解

---