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

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

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

В конечном итоге вам потребуется различать webpack.config.js между разработкой и производственными сборками. У вас есть (по крайней мере) два варианта:

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

• Среда как первый параметр. См. документацию CLI по параметрам среды для примеров синтаксиса.
• Карта опций (argv) как второй параметр. Она описывает опции, переданные webpack, такие как output-filename и optimize-minimize.

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

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

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

Возможен экспорт нескольких промисов, объединив их в Promise.all([/* Your promises */]).

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

Возврат Promise работает только при использовании webpack через командную строку. webpack() ожидает объекта.

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

Вместо экспорта одного объекта/функции конфигурации, вы можете экспортировать несколько конфигураций (с версии 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',
}];

Если вы передадите имя флагом --config-name, webpack построит только эту конкретную конфигурацию.