При написании кода в src вводится js-файл. После упаковки веб-пакета формируется входной файл. В этом случае имя и путь к js-файлу в html неверны, поэтому веб-пакет. необходимо упаковать и упаковать html-файл. Был заменен путь к импортированному js-файлу.
Преимущества использования веб-пакета для упаковки html:
(1) Упакованный js-файл может быть автоматически добавлен в html
(2) После упаковки html он все равно будет сгенерирован в папке сборки и объединен с упакованным js-файлом. чтобы при выходе в Интернет вам нужно было только скопировать папки, созданные при упаковке, в онлайн-среду
(3). Это поможет нам сжать html-файлы.
1. Установите плагин
Webpack изначально
.может понимать только файлы JS и JSON и должен поддерживать упаковку других файлов. Для всех типов файлов необходимо установить соответствующий плагин или загрузчик.
Если нам нужно упаковать HTML-файлы, нам сначала нужно установить плагин html-webpack-plugin :
npm install html-webpack-plugin -D
Роль этого плагина:
создать html-файл в разделе экспорта по умолчанию, а затем импортируйте все ресурсы JS/CSS.
Мы также можем самостоятельно указать html-файл и добавить ресурсы в этот html-файл.
После установки плагина html-webpack-plugin вам необходимо выполнить
настройку.
настройте его в файле webpack.config.js :
// ...
// 1. Внедряем плагин const HtmlWebpackPlugin = require('html-webpack-plugin');
модуль.экспорт = {
// ...
// 2. Настраиваем плагины плагина в плагинах: [
новый HtmlWebpackPlugin({
template: 'index.html', // Указываем файл шаблона записи (относительно корневого каталога проекта)
имя файла: 'index.html', // Указываем имя и местоположение выходного файла (относительно выходного каталога)
// Остальные элементы настройки плагина можно посмотреть в официальной документации плагина})
]
} Ссылка на подробную конфигурацию: https://www.npmjs.com/package/html-webpack-plugin.
Убедитесь, что путь и имя файла шаблона записи соответствуют конфигурации, а затем можно скомпилировать.
3. При настройке нескольких записей JS и нескольких ситуаций HTML
необходимо скомпилировать несколько файлов HTML, и файлы необходимо импортировать разные файлы JS. Однако по chunk упакованный файл HTML будет импортировать все упакованные файлы JS. указан для распространения JS.
константный путь = требуется ('путь');
// 1. Внедряем плагин const HtmlWebpackPlugin = require('html-webpack-plugin');
модуль.экспорт = {
// ...
// 2. Настройка записи JS (несколько записей)
вход: {
поставщик: ['./src/jquery.min.js', './src/js/common.js'],
индекс: './src/index.js',
корзина: './src/js/cart.js'
},
//Настраиваем вывод экспорта: {
имя файла: '[имя].js',
путь: path.resolve(__dirname, 'build/js')
},
// 3. Настраиваем плагины: [
новый HtmlWebpackPugin({
шаблон: 'index.html',
имя файла: 'index.html',
// Используйте чанк, чтобы указать, какие JS-файлы импортировать чанк: ['index', 'vendor']
}),
// Сколько HTML нужно скомпилировать, сколько новых плагинов нужно new HtmlWebpackPlugin({
шаблон: './src/cart.html',
имя файла: 'cart.html',
кусок: ['корзина', 'продавец']
})
]
} Совет: Здесь необходимо отметить, сколько HTML-файлов вам нужно скомпилировать, сколько раз вам нужно создать новый
HtmlWebpackPlugin.
После успешной компиляции приведенной выше конфигурации результат будет следующим:
build
|__ index.html #Представляем index.js иvendor.js
|__ cart.html #Представляем cart.js иvendor.js
|__ js
|__vendor.js # Создано с помощью jquery.min.js и common.js |__ index.js # Создано с помощью index.js |__ cart.js # Создано с помощью cars.js для 1, webpack. config.js Configuration
const HTMLWebpackPlugin = require('html-webpack-plugin')
...
плагины: [
// html-webpack-plugin конфигурация упаковки html Этот плагин сгенерирует для вас файл HTML5 new HTMLWebpackPlugin({
template: "./index.html", // Относительный или абсолютный путь к шаблону (цель упаковки)
title: 'Home', // Заголовок, используемый для сгенерированного хеша HTML-документа: true, //true добавляет уникальный хэш компиляции веб-пакета ко всем включенным скриптам и файлам CSS. В основном используется для очистки кэша,
минимизировать: { // Сжимаем HTML
коллапсWhitespace: true, // Свернуть пустое пространство KeepClosingSlash: true, // Сохранять закрытые пробелы RemoveComments: true, // Удалить комментарии removeRedundantAttributes: true, // Удалить избыточные атрибуты removeScriptTypeAttributes: true, // Удалить атрибуты типа скрипта «Скрипт» RemoveStyleLinkTypeAttributes: true, // Удаляем атрибут типа ссылки стиля useShortDoctype: true, // Используем тип короткого документа saveLineBreaks: true, // Сохраняем разрывы строк minifyCSS: true, // Сжимаем CSS в тексте
minifyJS: true, // Сжимаем текстовые js
}
}),
],
... 2. На данный момент наш index.html
<!DOCTYPE html>
<html язык="">
<голова>
<мета-кодировка="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Демо-версия веб-пакета</title>
</голова>
<тело>
<div id="приложение">
конфигурация упаковки html</div>
</тело>
</html> 3. На данный момент наш index.js
импортирует «./../css/index.less»
функция add(x,y) {
вернуть х+у
}
console.log(add(2,3)); 3. Введите пакет в веб-пакет консоли и обнаружите, что выходной файл пакета имеет дополнительный index.html, его содержимое выглядит следующим образом:
<!DOCTYPE html>
<html язык="">
<голова>
<мета-кодировка="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Демо-версия веб-пакета</title>
<script defer src="index.js"></script></head>
<тело>
<div id="приложение">
конфигурация упаковки html</div>
</тело>
</html> <script defer="" src="index.js"></script> автоматически вводится в
браузер для открытия упакованного вывода index.html. Обнаружено, что стиль имеет эффект и элемент управления. устройство также выводит нормально:
