Webpack-如何在一次运行中捆绑多个较少的主题

Question

我有蓝绿色的黄色主题。它是这样的：

• 绿色主题较少的文件

  @primary-hover-color: white; 
  @item-active-bg:  #E4F6F2;
  @item-hover-bg: #E4F6F2;
  

• 蓝色主题较少的文件

  @primary-hover-color:white;
  @item-active-bg:  #E3F0FC;
  @item-hover-bg:  #E3F0FC;
  

• 少黄色主题文件

  @primary-hover-color: white;
  @item-active-bg: #FFF7E4;
  @item-hover-bg: #FFF7E4;
  

我写了这个webpack配置文件

const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const lessVarsToJs = require('less-vars-to-js');

const vendorDLLName = require('./dll/dll.conf.js');
const dllManifest = require('./dll/manifest.json');
const HuobanWebpackPlugin = require('./dev/huoban-webpack-plugin');

const hash = '.[chunkhash:8]';

let myConfig;
const myConfigFilePath = path.resolve(__dirname, './my-config.js');
const myConfigStat = fs.existsSync(myConfigFilePath);
let basename;
if (myConfigStat) {
  myConfig = require(myConfigFilePath); // eslint-disable-line
  basename = JSON.parse(myConfig.define['wpConfig.basename']);
  if (!basename.endsWith('/')) basename += '/';
  myConfig.define['wpConfig.basename'] = `"${basename}"`;
}
console.log('myConfig:', myConfig || '没有自定义配置');
function getConfig(key) { return myConfig && myConfig[key]; }

const mode = getConfig('mode') || 'development';
const sourceMap = { sourceMap: mode === 'development' };

const skinTheme = [
  { name: 'Red', theme: 'theme-red' },
  { name: 'Orange', theme: 'theme-orange' },
  { name: 'Yellow', theme: 'theme-yellow' },
  { name: 'Green', theme: 'theme-green' },
  { name: 'Blue', theme: 'theme-blue' },
  { name: 'Purple', theme: 'theme-purple' },
  { name: 'Indigo', theme: 'theme-indigo' },
  { name: 'Gray', theme: 'theme-gray' },
  { name: 'Default', theme: 'theme' }
];

const configs = skinTheme.map((it) => {
  const lessVarsTheme = lessVarsToJs(fs.readFileSync(path.join(__dirname, `./assets/less/${it.theme}.less`), 'utf8'));
  return {
    entry: {
      index: './index.js',
    },
    output: {
      path: path.resolve(__dirname, 'dist'), // 输出根目录
      publicPath: basename || '/',
      filename: `js/[name]${hash}.js`, // 输出文件目录 及文件名格式
      chunkFilename: `js/[name]${hash}.js`
    },
    module: {
      rules: [{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: [{
          loader: 'babel-loader',
          query: { cacheDirectory: true },
        }],
      }, {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, {
          loader: 'css-loader',
          options: { ...sourceMap }
        }, {
          loader: 'postcss-loader',
          options: { ...sourceMap }
        }],
      }, {
        test: /\.less$/i,
        use: [MiniCssExtractPlugin.loader, {
          loader: 'css-loader',
          options: { ...sourceMap }
        }, {
          loader: 'postcss-loader',
          options: { ...sourceMap }
        }, {
          loader: 'less-loader',
          options: {
            ...sourceMap,
            modifyVars: lessVarsTheme,
            minimize: true,
          },
        }],
      }, {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [{
          loader: 'file-loader',
          query: { name: 'fonts/[name].[ext]' },
        }],
      }, {
        test: /\.(png|svg|jpg|gif)$/,
        use: [{
          loader: 'url-loader',
          options: { limit: 8192, name: 'images/[name].[ext]' },
        }],
      }],
    },
    plugins: [
      new webpack.optimize.MinChunkSizePlugin({
        minChunkSize: 16000 // Minimum number of characters
      }),
      new webpack.HashedModuleIdsPlugin(),
      new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn/),
      new HtmlWebpackPlugin({
        name: 'vendor',
        filename: 'index.html', // 输出相对路径和文件名
        template: 'index.html', // 模版路径
        vendorDLL: `./js/${vendorDLLName}`, // 引用DLL文件
      }),
      new webpack.DllReferencePlugin({
        context: __dirname,
        manifest: dllManifest,
      }),
      new CopyWebpackPlugin([
        './favicon.ico',
        './web.config',
        { from: `./dll/${vendorDLLName}`, to: `./js/${vendorDLLName}` },
        { from: './assets/lib/pdf.js', to: './pdfjs' },
      ], { copyUnmodified: true }),
      new MiniCssExtractPlugin({
        filename: `theme/${it.name}/${it.name}${hash}.css`,
        chunkFilename: `theme/${it.name}/${it.name}${hash}.css`
      }),
      new HuobanWebpackPlugin({}),
      new ProgressBarPlugin({ renderThrottle: 200 }),

      new webpack.DefinePlugin({
        'wpConfig.setUrl': '"http://192.168.0.140:9114/api"',
        'wpConfig.basename': '"/"',
        ...(getConfig('define') || {}),
      }),
    ],
    devtool: mode === 'development' ? 'source-map' : false,
    mode
  };
});

configs[0].plugins.unshift(new CleanWebpackPlugin(['dist']));

module.exports = configs;

但是它工作太慢。一包花了我10分钟。

如何优化它？让它更快并在开发模式下运行