Шаг 5. Особенность плагина HtmlWebpack при работе с несколькими JS-файлами

После предыдущего шага могло показаться, что всё идёт гладко — с такой конфигурацией приложение будет работать как нужно. На самом деле нет, не будет. У нас возникнут проблемы, если мы захотим подключить несколько JS-файлов на вход — для каждой страницы раздельно.

Здесь мы познакомимся с чанками — chunks.

Чанки — это код, который грузится либо синхронно, либо асинхронно. Если ещё проще, то чанки — это либо часть чего-то, либо нечто целое.

Как это будет выглядеть в нашем коде:

plugins: [].concat(
  fileName.map(
    (file) =>
      new HtmlWebpackPlugin({
        inject: 'head',
        template: `./${file}.html`,
        filename: `./${file}.html`,
        chunks: [file]
      }),
  ),
).filter(Boolean) 

Здесь мы добавляем поле chunks, передавая в качестве параметра массив имён файлов.

Чанки также принимают в себя строки, массивы и объекты с указанием имени подключаемого JS-файла, который является входной точкой (точками) приложения. Если мы, например, укажем chunks: 'index', то HTML-страница сможет увидеть только один из двух файлов и его код. В нашем случае мы в очередной раз добавляем динамичности приложению.