Шаг 3. Создание недостающих файлов и переменных, добавление зависимостей

Теперь нам нужно оживить сборку. Сначала в base-конфигурации превратим переменную const config = {...} в запись module.exports = {...}, так как предыдущая запись нам уже не нужна.

Под предыдущей записью понимается следующее:

module.exports = () => { 
  if (isProduction) {
    config.mode = 'production';

    config.plugins.push(new MiniCssExtractPlugin());
  } else {
    config.mode = 'development';
  }
  return config;
};  

После этого в самом начале конфига (где module.exports) добавляем запись:

module.exports = {
  context: path.resolve(__dirname, '../src'),
  entry: './index.js', // входная точка теперь будет выглядеть так
  // здесь остальной код...
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  ],
  // дальше идут обработчики...
}

Обратите внимание то, что некоторые поля в записи выше также подлежат изменениям.

context позволяет нам сократить путь до директории с исходным кодом.

Теперь создадим остальные файлы в директории build:

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

В каждом из вновь созданных файлов в качестве заглушек (чтобы проект точно запустился) нужны записи:

module.exports = { // webpack.dev.js
  mode: 'development',
};

module.exports = {  // webpack.prod.js
  mode: 'production',
};

И на выходе мы получаем несколько файлов с конфигами:

• основной — webpack.config.js;
• три дополнительных — в директории build.

Дополнительные файлы подключаем в 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!');
  }
};

Наконец, чтобы завести проект, в файле package.json в поле scripts изменим команду запуска сервера — явно укажем, в каком режиме он будет работать. Без этого webpack не поймёт, как и что ему запускать:

"start": "npx webpack serve --mode development"