Webpack 合并

Webpack 是一个模块打包工具，能够将多个模块打包成一个压缩的 JavaScript 文件。Webpack 的核心功能是“模块化”，使用不同的 Loader 和 Plugin 可以实现打包不同类型的文件。Webpack 合并指的是将多个配置文件进行合并以实现更高效更灵活的打包。

Webpack 配置文件

Webpack 的配置文件是一个 JavaScript 文件，通常命名为 webpack.config.js。在配置文件中可以设置入口文件、输出路径、Loader、Plugin 等参数。使用多个配置文件可以实现不同环境下的不同配置，例如生产环境和开发环境需要设置不同的输出路径和压缩方式。

示例配置文件：

const path = require('path');

const devConfig = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.dev.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
        ],
      },
    ],
  },
  devServer: {
    contentBase: './dist',
  },
};

const prodConfig = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.prod.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html',
      minify: {
        removeAttributeQuotes: true,
        collapseWhitespace: true,
        removeComments: true,
      },
    }),
  ],
};

module.exports = (env) => {
  if (env === 'production') {
    return prodConfig;
  }
  return devConfig;
};

合并多个配置文件

Webpack 提供了多种方式来合并多个配置文件，可以根据实际需求选择不同的方式。

使用 Object.assign()

Object.assign() 可以将多个对象合并成一个。在 Webpack 中，可以使用该方法将多个配置文件中相同的属性进行合并。

示例：

const commonConfig = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

const devConfig = {
  devServer: {
    contentBase: './dist',
  },
};

const prodConfig = Object.assign({}, commonConfig, {
  plugins: [new CleanWebpackPlugin(), new HtmlWebpackPlugin()],
});

module.exports = (env) => {
  if (env === 'production') {
    return prodConfig;
  }
  return Object.assign({}, commonConfig, devConfig);
};

使用 webpack-merge

webpack-merge 是官方提供的一个用于合并 Webpack 配置文件的工具。它可以方便地合并多个配置文件，并且能够处理嵌套的配置规则。

示例：

const commonConfig = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

const devConfig = {
  devServer: {
    contentBase: './dist',
  },
};

const prodConfig = {
  plugins: [new CleanWebpackPlugin(), new HtmlWebpackPlugin()],
};

module.exports = (env) => {
  if (env === 'production') {
    return merge(commonConfig, prodConfig);
  }
  return merge(commonConfig, devConfig);
};

总结

Webpack 合并可以帮助我们实现更高效、更灵活的打包过程。使用多个配置文件，可以为不同环境提供不同的配置，提高了打包的自动化程度。合并多个配置文件有多种方式，Object.assign() 和 webpack-merge 是最常用的方式。