Управление выводом
Это руководство дополняет примеры кода, представленные в руководстве
Asset Management.
До сих пор мы вручную включали все наши ресурсы в наш index.html файл, но по мере роста вашего приложения и при начале использования хешей в именах файлов и выводе нескольких пакетов, становится сложно вручную управлять вашим index.html файлом. Однако существуют некоторые плагины, которые значительно упростят этот процесс.
Подготовка
Сначала давайте немного изменим наш проект:
project
webpack-demo
|- package.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>
- <title>Asset Management</title>
+ <title>Output Management</title>
+ <script src="./print.bundle.js"></script>
</head>
<body>
- <script src="./bundle.js"></script>
+ <script src="./app.bundle.js"></script>
</body>
</html> Теперь изменим конфигурацию. Мы добавим наш src/print.js в качестве новой точки входа (print) и изменим выходные данные так, чтобы они динамически генерировали имена пакетов на основе имён точек входа:
webpack.config.js
const path = require('path');
module.exports = {
- entry: './src/index.js',
+ entry: {
+ app: './src/index.js',
+ print: './src/print.js',
+ },
output: {
- filename: 'bundle.js',
+ filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
}; Давайте запустим npm run build и посмотрим, что это сгенерирует:
...
Asset Size Chunks Chunk Names
app.bundle.js 545 kB 0, 1 [emitted] [big] app
print.bundle.js 2.74 kB 1 [emitted] print
... Мы видим, что webpack генерирует наши print.bundle.js и app.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: {
app: './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:
...
Asset Size Chunks Chunk Names
print.bundle.js 544 kB 0 [emitted] [big] print
app.bundle.js 2.81 kB 1 [emitted] app
index.html 249 bytes [emitted]
... Если открыть index.html в вашем редакторе кода, вы увидите, что HtmlWebpackPlugin создал для вас полностью новый файл, и все пакеты автоматически добавлены.
Если вы хотите узнать больше о всех функциях и опциях, которые предоставляет HtmlWebpackPlugin , ознакомьтесь с ним на HtmlWebpackPlugin репозитории.
Вы также можете взглянуть на html-webpack-template, который предоставляет несколько дополнительных функций помимо шаблонного файла по умолчанию.
Очистка папки /dist
Как вы могли заметить из предыдущих руководств и примеров кода, наша папка /dist стала довольно захламлённой. Webpack генерирует файлы и помещает их в папку /dist , но он не отслеживает, какие из файлов фактически используются вашим проектом.
В общем случае, хорошая практика – очищать папку /dist перед каждой сборкой, чтобы генерировались только используемые файлы. Давайте позаботимся об этом.
Популярный плагин для управления этим – clean-webpack-plugin, поэтому давайте установим и настроится его.
npm install --save-dev clean-webpack-plugin
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js',
},
plugins: [
+ new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'Output Management',
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
}; Теперь запустите 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://v4.webpack.js.org/guides/output-management
