Шаг 3. Выделение кода, разнесение по файлам

Мы до сих пор не решили глобальную проблему — у нас всё ещё большое количество кода в одном файле. Давайте перенесём код туда, где он и должен быть.

Всё, что связано с разработкой, будет находиться в файле webpack.dev.js. Так как у нас нет каких-либо дополнительных пакетов, помимо стандартного перечня, будем довольствоваться тем, что есть.

Выносим сервер для разработки (webpack-dev-server) в файл webpack.dev.js. Теперь в этом файле будет такая запись:

const path = require('path'); // подключается из Node.js и нужен для нормальной работы путей

module.exports = {
  mode: 'development', // режим ведения разработки
  devServer: {
    static: {
      directory: path.join(__dirname, '../src/assets'), // указание директории со статическими файлами
    },
    open: true, // автоматически открывает браузер, установленный в ОС по умолчанию
    compress: true, // сжимает исходный размер, храня его в оперативной памяти компьютера
    port: 4321, // порт ведения разработки
    hot: false, // отвечает за подтягивание изменений в HTML — моментально
  },
}

Файл webpack.prod.js выглядит минималистично. В поле плагинов мы будем постепенно добавлять оптимизацию для уменьшения размера итогового бандла. По желанию также можете добавить плагин для уменьшения размера шрифтов.

module.exports = {
  mode: 'production',
  plugins: []
};