Шаг 2. Создание файлов и директорий, перенос кода

Создадим директорию, в которой будут лежать конфиги — отдельно для каждого режима разработки.

Создание новой директории из терминала выглядит так:

mkdir build

Там же создаём три файла:

• webpack.base.js — для обобщения конфига с целью избежания дубликатов;

• webpack.dev.js — для всего, что связано с режимом разработки;

• webpack.prod.js — для всего, что связано с режимом сборки.

Теперь весь код, находящийся в файле webpack.config.js, переносим в созданный webpack.base.js. Не забываем, что теперь в файле package.json необходимо изменить скрипты, указать в них пути к головному конфигу:

"scripts": {
  "build": "npx webpack --mode production --config webpack.config.js",
  "dev": "npx webpack --mode development --config webpack.config.js",
  "start": "npx webpack serve --mode development"
}

Связано это с тем, что «из коробки» в webpack нельзя разъединить конфиг на несколько файлов. По умолчанию сборщик самостоятельно ищет файл с именем webpack.config.js, и установленный пакет webpack-merge ломает данную встроенную функцию.

В самом webpack.config.js у нас теперь лежит следующий код:

const {merge} = require('webpack-merge');
const baseConfig = require('./build/webpack.base');
const devConfig = require('./build/webpack.dev');
const prodConfig = require('./build/webpack.prod');

module.exports = (_, mode) => {
  switch (mode.mode) {
    case 'development':
      return merge(baseConfig, devConfig);
    case 'production':
      return merge(baseConfig, prodConfig);
    default:
      throw new Error('No matching configuration was found!');
  }
};