Управление выводом

До сих пор мы вручную включали все наши ресурсы в файл index.html, но по мере роста вашего приложения и начала использования хэшей в именах файлов и вывода нескольких пакетов, станет сложно вручную управлять вашим файлом index.html. Однако существуют несколько плагинов, которые значительно упростят этот процесс.

Подготовка

Сначала давайте немного изменим наш проект:

project

  webpack-demo
  |- package.json
  |- package-lock.json
  |- webpack.config.js
  |- /dist
  |- /src
    |- index.js
+   |- print.js
  |- /node_modules

Давайте добавим немного логики в наш файл src/print.js:

src/print.js

export default function printMe() {
  console.log('I get called from print.js!');
}

И воспользуемся этой функцией в нашем файле src/index.js:

src/index.js

 import _ from 'lodash';
+import printMe from './print.js';

 function component() {
   const element = document.createElement('div');
+  const btn = document.createElement('button');

   element.innerHTML = _.join(['Hello', 'webpack'], ' ');

+  btn.innerHTML = 'Click me and check the console!';
+  btn.onclick = printMe;
+
+  element.appendChild(btn);
+
   return element;
 }

 document.body.appendChild(component());

Также обновим наш файл dist/index.html, подготовив его к разделению Webpack записей:

dist/index.html

 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />
-    <title>Asset Management</title>
+    <title>Output Management</title>
+    <script src="./print.bundle.js"></script>
   </head>
   <body>
-    <script src="bundle.js"></script>
+    <script src="./index.bundle.js"></script>
   </body>
 </html>

Теперь изменим конфигурацию. Мы добавим наш src/print.js в качестве новой точки входа (print) и изменим вывод, чтобы он динамически генерировал имена пакетов на основе имён точек входа:

webpack.config.js

 const path = require('path');

 module.exports = {
-  entry: './src/index.js',
+  entry: {
+    index: './src/index.js',
+    print: './src/print.js',
+  },
   output: {
-    filename: 'bundle.js',
+    filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
 };

Давайте запустим npm run build и посмотрим, что это сгенерирует:

...
[webpack-cli] Compilation finished
asset index.bundle.js 69.5 KiB [emitted] [minimized] (name: index) 1 related asset
asset print.bundle.js 316 bytes [emitted] [minimized] (name: print)
runtime modules 1.36 KiB 7 modules
cacheable modules 530 KiB
  ./src/index.js 406 bytes [built] [code generated]
  ./src/print.js 83 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
webpack 5.4.0 compiled successfully in 1996 ms

Мы видим, что Webpack генерирует наши файлы print.bundle.js и index.bundle.js, которые мы также указали в нашем файле index.html. Если открыть index.html в вашем браузере, вы увидите, что происходит при нажатии кнопки.

Но что произойдёт, если мы изменим имя одной из точек входа или даже добавим новую? Сгенерированные пакеты будут переименованы при сборке, но наш файл index.html по-прежнему будет ссылаться на старые имена. Исправим это с помощью HtmlWebpackPlugin.

Настройка HtmlWebpackPlugin

Сначала установите плагин и измените файл webpack.config.js:

npm install --save-dev html-webpack-plugin

webpack.config.js

 const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');

 module.exports = {
   entry: {
     index: './src/index.js',
     print: './src/print.js',
   },
+  plugins: [
+    new HtmlWebpackPlugin({
+      title: 'Output Management',
+    }),
+  ],
   output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
 };

Перед выполнением сборки стоит знать, что HtmlWebpackPlugin по умолчанию сгенерирует собственный файл index.html, даже если у нас уже есть такой в папке dist/. Это означает, что он заменит наш файл index.html сгенерированным новым. Посмотрим, что произойдёт при выполнении npm run build:

...
[webpack-cli] Compilation finished
asset index.bundle.js 69.5 KiB [compared for emit] [minimized] (name: index) 1 related asset
asset print.bundle.js 316 bytes [compared for emit] [minimized] (name: print)
asset index.html 253 bytes [emitted]
runtime modules 1.36 KiB 7 modules
cacheable modules 530 KiB
  ./src/index.js 406 bytes [built] [code generated]
  ./src/print.js 83 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
webpack 5.4.0 compiled successfully in 2189 ms

Если вы откроете index.html в своём редакторе кода, вы увидите, что HtmlWebpackPlugin создал для вас совершенно новый файл, и все пакеты автоматически добавлены.

Если вы хотите узнать больше о всех функциях и параметрах, которые предоставляет HtmlWebpackPlugin, прочитайте информацию на HtmlWebpackPlugin репозитории.

Очистка папки `/dist`

Как вы могли заметить в предыдущих руководствах и примерах кода, наша папка /dist стала довольно загромождённой. Webpack будет генерировать файлы и помещать их в папку /dist для вас, но не отслеживает, какие файлы фактически используются вашим проектом.

В целом, рекомендуется очищать папку /dist перед каждой сборкой, чтобы генерировались только используемые файлы. Решим это с помощью параметра output.clean.

webpack.config.js

 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');

 module.exports = {
   entry: {
     index: './src/index.js',
     print: './src/print.js',
   },
   plugins: [
     new HtmlWebpackPlugin({
       title: 'Output Management',
     }),
   ],
   output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
+    clean: true,
   },
 };

Теперь выполните npm run build и просмотрите папку /dist. Если всё прошло хорошо, вы увидите только файлы, сгенерированные сборкой, и больше никаких старых файлов!

Манифест

Вы, возможно, задаётесь вопросом, как Webpack и его плагины "знают", какие файлы генерируются. Ответ — в манифесте, который Webpack использует для отслеживания того, как все модули отображаются в выходных пакетах. Если вас интересует управление output Webpack другими способами, манифест будет хорошим местом для начала.

Данные манифеста могут быть извлечены в файл json для использования с помощью WebpackManifestPlugin.

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

Заключение

Теперь, когда вы узнали о динамическом добавлении пакетов в ваш HTML, давайте перейдём к руководству по разработке. Или, если вы хотите углубиться в более сложные темы, мы рекомендуем обратиться к руководству по разделению кода.

© JS Foundation and other contributors
Licensed under the Creative Commons Attribution License 4.0.
https://webpack.js.org/guides/output-management

Управление выводом

Подготовка

Настройка HtmlWebpackPlugin

Очистка папки /dist

Манифест

Заключение

Очистка папки `/dist`