Типы конфигураций

Помимо экспорта одного объекта конфигурации, есть несколько других способов, которые также охватывают другие потребности.

Экспорт функции

В конечном итоге вам потребуется различать в вашем webpack.config.js между разработкой и производственными сборками. Существует несколько способов сделать это. Один из вариантов — экспортировать функцию из вашей конфигурации webpack вместо экспорта объекта. Функция будет вызываться с двумя аргументами:

• Среда в качестве первого параметра. См. документацию CLI по параметрам среды для примеров синтаксиса.
• Карта опций (argv) в качестве второго параметра. Это описывает параметры, переданные в webpack, с такими ключами, как output-path и mode.

-module.exports = {
+module.exports = function(env, argv) {
+  return {
+    mode: env.production ? 'production' : 'development',
+    devtool: env.production ? 'source-map' : 'eval',
     plugins: [
       new TerserPlugin({
         terserOptions: {
+          compress: argv.mode === 'production' // only if `--mode production` was passed
         }
       })
     ]
+  };
};

Экспорт промиса

Webpack выполнит функцию, экспортированную файлом конфигурации, и подождет, пока будет возвращён промис. Полезно, когда вам нужно асинхронно загрузить переменные конфигурации.

module.exports = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        entry: './app.js',
        /* ... */
      });
    }, 5000);
  });
};

Экспорт нескольких конфигураций

Вместо экспорта одного объекта/функции конфигурации, вы можете экспортировать несколько конфигураций (с версии webpack 3.1.0 поддерживаются и несколько функций). При запуске webpack все конфигурации строятся. Например, это полезно для связывания библиотеки для нескольких целей, таких как AMD и CommonJS:

module.exports = [
  {
    output: {
      filename: './dist-amd.js',
      libraryTarget: 'amd',
    },
    name: 'amd',
    entry: './app.js',
    mode: 'production',
  },
  {
    output: {
      filename: './dist-commonjs.js',
      libraryTarget: 'commonjs',
    },
    name: 'commonjs',
    entry: './app.js',
    mode: 'production',
  },
];

зависимости

В случае, если у вас есть конфигурация, которая зависит от результата другой конфигурации, вы можете указать список зависимостей, используя массив dependencies.

webpack.config.js

module.exports = [
  {
    name: 'client',
    target: 'web',
    // …
  },
  {
    name: 'server',
    target: 'node',
    dependencies: ['client'],
  },
];

параллельность

В случае экспорта нескольких конфигураций, вы можете использовать опцию parallelism в массиве конфигураций для указания максимального количества компиляторов, которые будут компилировать параллельно.

• Тип: number
• Доступно: 5.22.0+

webpack.config.js

module.exports = [
  {
    //config-1
  },
  {
    //config-2
  },
];
module.exports.parallelism = 1;