Webpack-merge介绍

Webpack-merge是一个帮助程序员合并webpack配置的npm包，可以简化webpack配置管理，提高工作效率。

使用方式

安装webpack-merge

npm install webpack-merge --save-dev

在webpack配置文件中引入webpack-merge

const { merge } = require('webpack-merge');

使用merge方法合并不同的webpack配置

const commonConfig = require('./webpack.common.js');
const devConfig = require('./webpack.dev.js');
const prodConfig = require('./webpack.prod.js');

module.exports = (env) => {
  const isDev = env.mode === 'development';

  const baseConfig = isDev ? devConfig : prodConfig;

  return merge(commonConfig, baseConfig);
};

支持的合并方式

• smart（默认）：智能合并，会根据配置文件类型进行合并

const result = merge.smart({}, {});

• mergeWithRules：自定义规则合并

const result = merge({
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: { importLoaders: 1 }
          },
          'postcss-loader'
        ]
      }
    ]
  },
}, {
  module: {
    rules: [
      {
        test: /\.css/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
}, {
  module: {
    rules: {
      test: 'match',
      use: 'prepend'
    }
  }
})

// result is:
// {
//   module: {
//     rules: [
//       {
//         test: /\.css$/,
//         use: [
//           'style-loader',
//           {
//             loader: 'css-loader',
//             options: { importLoaders: 1 }
//           },
//           'postcss-loader'
//         ]
//       },
//       {
//         test: /\.css/,
//         use: [
//           'style-loader',
//           {
//             loader: 'css-loader',
//             options: { importLoaders: 1 }
//           }
//         ]
//       }
//     ],
//   }
// }

• customizeArray：通过定制化数组合并

const result = merge({
  entry: ['index.js'],
  resolve: {
    alias: {
      Foo: 'component/Foo',
    },
  },
}, {
  entry: ['app.js'],
  resolve: {
    alias: {
      Bar: 'component/Bar',
    },
  },
}, {
  customizeArray(a, b, key) {
    if (key === 'entry') {
      // return entries merged together
      return Array.from(new Set([...a, ...b]));
    }

    // fall back to default merging
    return undefined;
  },
});

注意事项

• webpack-merge只是一个合并webpack配置的管理工具，如果使用不当会引起错误。
• webpack-merge只能合并同类型的配置，即不能把rules合并到plugins中。
• merge方法会覆盖前者的key值，要确保合并顺序正确。