Дорога Лина к webpack — основы
предисловие
Ты с нетерпением ждешь мира, надеюсь, у тебя нетbug
. Всем привет! Я Лин Дуань!
Во-первых, кратко расскажу о причине и следствии названия, чтобы люди, которые едят дыни, не понимали, почему"呆妹"
.
Это произошло в статье, которую я написал ранее«Резюме чтения «Вопрос души Sanyuan-JS»:
Тогда ... я буду тамLv4
Я публикую эту статью не для того, чтобы что-то доказать, я просто хочу сказать:
"你们根本不是喜欢我的文章,就是馋我的身子!"
Дизайнер, с несколькими смайликами собачьей головы.
хорошо.
[собачья голова] [собачья голова] [собачья голова]
Так устройте эту волну"呆妹"
Ну кто меня назвал блогером, который держит свои обещания.
(Примечание ⚠️ Следующий контент может вызвать у вас дискомфорт, смотрите с осторожностью)
(Надеюсь, все не будут, как этот блогер, портить атмосферу Наггетс нечистоплотными средствами ради популярности. Такое поведение - лишь улыбка фанатов после апгрейда до четвертого уровня. Надеюсь, что моя статья может понравиться всем. Спасибо~)
(для большего"呆妹"
Вы можете обратить внимание на QR-код в конце статьи, а затем ввести"呆妹"
)
Введение в серию веб-пакетов
Эта серия документирует моюwebpack
процесс изучения. Если вы, как и я, хотите освоитьwebpack
, то я думаю, что это будет вам полезно, потому что учебник основан наwebpack
Личность Сяобая объяснить, делоdemo
Он также очень подробный, включая:
- Основы (эта глава)
- Метод строительства
- Статьи по оптимизации
- статьи о погрузчиках
- Статьи по настройке
Рекомендуется сначалаmark
Потратьте время, чтобы увидеть.
(На самом деле, эта серия была написана давно и никогда не публиковалась. В то время я также написал длинную серию предисловий, которые меня растрогали. Если хотите почитать ахинею, то можете кликнуть сюда:Адрес GitHub, а теперь официально приступим к обучению)
Все статьиwebpack
номер версии^4.41.5
, webpack-cli
номер версии^3.3.10
.
существуетwebpack3
середина,webpack
сама и ееCLI
Оба находятся в одном пакете, но в версии 4 они разделены, что также позволяет нам лучше управлять ими.
1. Основное использование
Сначала рассмотрим самый простойwebpack
Путь.
Сначала вы должны знать,webpack
Как и другие зависимости, включителокальная установкаа такжеУстановить глобальноДа, но здесь я предлагаю вам использовать метод локальной установки,Глобальная установка не рекомендуется.
Потому что после использования глобальной установки это сделаетwebpack
привязаны к определенной версии и используют другуюwebpack
версия проекта может привести к сбою сборки.
Поэтому в следующих учебниках я буду устанавливать его локальноwebpack
способ объяснения.
(Адрес GitHub кейса в учебнике:LinDaiDai/webpack-basic)
1.1 Инициализировать проект
Сначала мы создаем каталог и инициализируем егоnpm
:
$ mkdir webpack-basic && cd webpack-basic
$ npm init -y
(использовать-y
инициализацияnpm
поможет нам сгенерировать значение по умолчаниюpackage.json
конфигурация)
1.2 Установите веб-пакет локально
Как упоминалось ранее, в статье используетсяwebpack
номер версии>4.0
Да, из-заwebpack
а такжеwebpack-cli
уже разделены, нам нужно установить их отдельно (если вы используетеwebpack
номер версии меньше4.0
вам просто нужно установитьwebpack
просто хорошо)
существуетwebpack-basic
Выполните команду в корневом каталоге:
$ npm install webpack webpack-cli --save-dev
Ты найдешьpackage.json
внутреннийdevDependencies
в дополнение к тому, что вы только что установилиwebpack
а такжеwebpack-cli
.
1.3 Создать пакетный файл
После выполнения вышеуказанных шагов давайте напишем простую страницу, чтобы увидеть эффект.
-
Сначала создайте
src
папку и создайтеindex.js
документ -
Создайте один в корневом каталоге
dist
папку и создайтеindex.html
документ
После этого структура проекта становится такой:
webpack-basic
|- package.json
|- /dist
|- index.html
|- /src
|- index.js
Добавим к нему кое-что:
// src/index.js
function component() {
var element = document.createElement('div');
element.innerHTML = "Hello Webpack";
return element;
}
document.body.appendChild(component());
<!--dist/index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack起步</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
index.js
Это нормально понять, но вы можете заметитьindex.html
представилmain.js
, но этоjs
Мы не видим, где находится файл.
не волнуйся, вотmain.js
Это то, через что мы проходим дальшеwebpack
Файлы производятся уже после упаковки, но здесь мы сначала вводим их заранее.
1.4 Выполнение упаковки веб-пакета
После написания приведенного выше кода мы можем использовать эту команду в корневом каталоге для упаковки:
$ npx webpack
В этот момент вы увидитеdist
В папке есть еще одинmain.js
файл и открытьindex.html
, вы увидите, что на странице отображается: «Hello Webpack».
Возможно, вы будете немного смущены, очевидно, у нас ничего не настроено, как это может быть сгенерированоmain.js
Шерстяная ткань.
вот так вwebpack4
не любойwebpack
В случае конфигурации,webpack
Вам будет предоставлен набор настроек по умолчанию.
- Буду
src/index.js
как точка входа (т.entry
вариант) - Буду
dist/main.js
на выходе (т.output
вариант)
Со слов официального сайта:
воплощать в жизнь
npx webpack
, поместит наш скрипт каквходная точка,Потомвыходдляmain.js
.
Доступно в Node 8.2+npx
команда для запуска бинарного файла webpack в изначально установленном пакете webpack (./node_modules/.bin/webpack
)
Во-вторых, используйте файл конфигурации
Из приведенного выше 👆 случая мы знаем, что вwebpack4
Если у вас нет файлов конфигурации, он предоставит вам конфигурацию по умолчанию.
Но когдаwebpack3
, это не допускается, должен бытьwebpack.config.js
файл для указания входа и выхода.
Но если вы используетеwebpack4
Для разработки, в реальном использовании, вам все еще нуженwebpack.config.js
файл для выполнения некоторых сложных настроек.
2.1 webpack.config.js
Давайте создадим файл в корневом каталоге проекта с именемwebpack.config.js
файл и напишите в нем некоторую базовую конфигурацию:
// webpack.config.js
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
Теперь давайте повторно используем команду для сборки:
$ npx webpack --config webpack.config.js
Hash: dabab1bac2b940c1462b
Version: webpack 4.0.1
Time: 328ms
Built at: 2018-2-26 22:47:43
Asset Size Chunks Chunk Names
bundle.js 69.6 KiB 0 [emitted] main
Entrypoint main = bundle.js
[1] (webpack)/buildin/module.js 519 bytes {0} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] ./src/index.js 256 bytes {0} [built]
+ 1 hidden module
WARNING in configuration(配置警告)
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.('mode' 选项还未设置。将 'mode' 选项设置为 'development' 或 'production',来启用环境默认值。)
Как видите, на этот раз он также успешно завершил сборку, но по сравнению с предыдущим оператором выполнения у нас есть еще один абзац:
--config webpack.config.js
На самом деле эффект от этой командыУкажите, с каким файлом конфигурации строить, например, здесь мы указываемwebpack.config.js
этот файл.
Но на самом деле можно и оставить это предложение здесь, т.к.webpack
Команда выберет его использование по умолчанию.
Только если ваш файл конфигурации не вызываетсяwebapck.config.js
, но, например, называетсяwebpack.other.config.js
, вы должны указать это.
Сейчас,webpack
В соответствии с вашей конфигурацией входsrc/index.js
, файл экспортаdist/bundle.js
.
Мы также должны переделатьdist/index.html
введено:
<script src="bundle.js"></script>
Этот файл конфигурации позволяет нам быть более гибкими, и мы можем указать правила загрузчика, плагины, параметры разрешения и многие другие улучшения посредством конфигурации.
2.2 Скрипты NPM
Выше 👆 мы используемnpx webpack
ТакойCLI
способ запустить локальныйwebpack
из:
$ npx webpack
На самом деле это не очень удобно, мы можем установить ярлык.package.json
добавитьnpm
сценарий:
{
"name": "webpack-basic",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10"
},
"dependencies": {
"lodash": "^4.17.15"
}
}
существуетscripts
Добавлена новая конфигурация"build: "webpack"
.
Теперь вы можете использоватьnpm run build
команда, чтобы заменить ту, которую мы использовали раньшеnpx
Заказ.
$ npm run build
Теперь эффект, выполняемый этим командным инструментом, такой же, как и выше 👆.
3. Управляйте ресурсами
Давайте рассмотрим каталог проекта, описанный выше 👆:
webpack-basic
|- package.json
|- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.js
Как видите, приведенный выше случай позволяет нам использовать толькоjs
файл для сборки, но в реальной разработке у нас не может быть толькоjs
файл, если мы хотим использоватьcss
, картинки, шрифты и эти ресурсы?
не переживай,webpack
Одной из лучших особенностей является то, что в дополнение кJavaScript
, также черезloader
импортировать любой другой тип файла.
3.1 Загрузка CSS
Сначала загрузимcss
файл для ознакомленияloader
.
загрузчик стилей и css-загрузчик
для отjs
импортировать модульcss
файл, такой как вы хотитеindex.js
представитьcss
документ:
// index.js
import './style.css'
// 或者用require()的方式
const style = require('./style.css')
Вы должны быть в проекте (т.е.module
конфигурация), установите и добавьте эти дваloader
:
- style-loader
- css-loader
$ npm i --save-dev style-loader css-loader
И вwebpack.config.js
настроить в:
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
};
мы вwebpack.config.js
добавилmodule
Конфигурация.
Конфигурация здесь означает:
webpack
На основе регулярного выражения определить, какие файлы следует искать, и предоставить их указанномуloader
./\.css$/
Это регулярное означает соответствие всем именам в каталоге, которые начинаются с.css
Все файлы, оканчивающиеся на , будут предоставленыstyle-loader
а такжеcss-loader
.
($
Вы должны знать, что это значит, это означает, что должно закончиться)
Примечание⚠️:
style-loader
положитьcss-loader
Спереди, иначе при упаковке будет сообщено об ошибке.
Это потому чтоloader
Порядок выполнения такой从右往左,从下往上
из,webpack
должно быть всеcss
После анализа зависимости модуля получается результат расчета, а затем создаетсяstyle
Этикетка. Поэтому должно бытьstyle-loader
помещатьcss-loader
спереди.
Внедрить css в js
Готов к использованию в нашем проекте прямо сейчасcss
, и вы можетеjs
ввел его в.
Давайте сначалаsrc
создать папкуstyle.css
файл и добавьте некоторый контент:
.color_red {
color: red;
}
а затем изменить наш предыдущийsrc/index.js
файл датьelement
Добавьте имя класса:
import './style.css' // 1. 导入css文件
function component() {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
element.classList.add('color_red') // 2. 添加类名
return element;
}
document.body.appendChild(component());
На этом этапе повторно используйте оператор команды для сборки:
$ npm run build
Откройте страницу и обнаружите, что надпись «Hello Webpack» на странице стала красной, что доказывает, чтоcss
Импорт прошел успешно.
Как это реализовано здесь:При запуске модуля теги, содержащие строки CSS, будут вставлены вhtml
документhead
середина.
Итак, если мы проверим страницу (т.е. откроем консоль), то вElements
в тебе найдешь,head
добавитstyle
ярлык, который является вашим определениемcss
Содержание.
Каков эффект от использования только css-loader?
Хотя выше 👆 мы вводим для использования на страницеcss
просто нужно использоватьstyle-loader
а такжеcss-loader
эти двоеloader
, то каковы их отдельные роли?
Теперь давайте изменимwebpack.config.js
настроить, удалитьstyle-loader
:
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
module: {
rules: [
{
test: /\.css$/,
use: [
- "style-loader",
"css-loader"
],
},
],
},
};
и положиindex.js
импортировано тудаstyle
Распечатайте и посмотрите:
// src/index.js
const style = require('./style.css')
console.log('style', style)
Эффект:
Его можно найти,css-loader
Его роль фактически состоит в том, чтобы распознавать импортcss
Этот модуль, и через определенные правила грамматики для преобразования контента.
Но здесь мы получаем массив, а это не то, что нам нужно, и страница не может его использовать. Поэтому необходимо сотрудничатьstyle-loader
Он может сыграть свою настоящую роль.
Роль загрузчика стилей
style-loader
Его принцип заключается в том, чтобы создатьstyle
тег, который будет содержать некоторые стили. и его нельзя использовать отдельно, потому что он не отвечает за синтаксический анализcss
предыдущие зависимости.
То есть:
- используется отдельно
css-loader
Мы можем только гарантировать, что мы можем цитироватьcss
Модуль приходит, но не работает. - а также
style-loader
создатьstyle
метка и импортироватьcss
В этот тег запихиваются стили
Но есть одно замечание, мы в текущем проектеjs
представил несколькоcss
модуль, он сгенерирует несколькоstyle
Этикетка.
Например, сейчас я создал новый в проектеstyle2.css
файл и добавьте несколько стилей:
.color_red {
font-size: 20px;
color: green;
}
затем вsrc/index.js
импортировать обаcss
документ:
import './style.css'
import './style2.css'
(не забудьте поставитьwebpack.config.js
серединаstyle-loader
повторно добавлено)
перезапустить в это времяnpm run build
нажмите и откройте страницу:
теперь ты найдешь"霖呆呆"
Он стал зеленым. (Конечно, я решил простить ее...)
Страница генерирует дваstyle
метка, а правила отображения стиля также относятся к лицевой стороне (style2.css
Сравниватьstyle.css
позднее знакомство)
3.2 Загрузка изображений
Мы рассмотрели, как загрузитьcss
, так как обрабатываются картинки в проекте?
file-loader
использоватьfile-loader
позволяет намjs
а такжеcss
Введите некоторые статические ресурсы в то же самое, вы должны сначала установить и настроить их:
$ npm i --save-dev file-loader
настроитьwebpack.config.js
:
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [{
test: /\.css$/,
use: [
"style-loader",
"css-loader"
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
}
}
Как видите, я в оригиналеrules
В массив добавлена новая конфигурация сcss-loader
Основы, я думаю, вы быстро поймете здесь.
Внедрение изображений в js/css
Далее давайте посмотрим на эффекты использования изображений в проекте.
Первый яsrc
В каталоге есть картинка:icon.png
.
а потом соответственно вindex.js
а такжеstyle.css
импортировать его в:
// index.js
import './style.css'
import Icon from './icon.png' // 1. 引入图片
function component() {
var element = document.createElement('div');
element.innerHTML = '霖呆呆';
element.classList.add('color_red')
var img = new Image(200, 200); // 2. 使用图片
img.src = Icon;
element.appendChild(img);
return element;
}
document.body.appendChild(component());
/* style.css */
.color_red {
color: red;
background: url('./icon.png');
height: 300px;
}
Переупакуйте, а затем проверьте страницу, вы увидите, что на изображения можно ссылаться нормально в обоих местах.
На этом этапе, если вы будете осторожны, вы можете обнаружить, что после упаковкиdist
В папке будет файл, названный в честь хеш-значения MD5.png
документ:
webpack-basic
|- /dist
|- 182ba2a0f5c9507387abe2ad84c23e6b.png
|- bundle.js
|- index.html
да, когда тыjs
илиcss
Когда это изображение импортируется в , оно будет обработано и добавлено вoutput
Под содержанием.
Интересно, если убратьindex.js
а такжеstyle.css
средняя параicon.png
цитаты, тоwebpack
после упаковкиdist
В папке такой картинки не будет.
Другие необязательные параметры для файлового загрузчика
Выше 👆 мы использовали его краткоfile-loader
:
rules: [
{
test: /\.(png|svg|jpg|gif)$/,
use: ["file-loader"],
},
],
фактически,file-loader
Есть много других параметров.
Например, указать правила именования файлов после упаковки, директорию для сохранения после упаковки и т. д.
Эти правила конфигурации можно поместить вoptions
В этом объекте:
rules: [
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: "file-loader",
options: {},
},
],
},
],
а такжеoptions
Варианты имеют, например.name、context、publicPath、outputPath
И так далее, вы можете проверить:file-loader
Я покажу это здесь,Упакованный образ хранится в папке с изображениями и называется исходным именем образа.:
rules: [
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "images/",
},
},
],
},
],
На этом этапе структура каталогов после упаковки станет следующей:
webpack-basic
|- /dist
|- /images
|- icon.png
|- bundle.js
|- index.html
name
из[name]
означает использование исходного имени файла,[ext]
представляет исходный тип файла,[hash]
означает имя по хеш-значению,[path]
Представляет ресурс относительноcontext
маршрут из.
(context
По умолчаниюwebpack.config.js
)
3.3 Загрузка шрифтов
Выше👆Мы научились загружать изображения, а как насчет загрузки шрифтов?
По сути, шрифт тоже является ресурсом, поэтому он загружается так же, как и картинка, и тоже используетfile-loader
.
Только вwebpack
Конфигурация требует, чтобы вы искали суффикс файла шрифта, чтобы выполнить следующую сделку:
webpack.config.js
rules: [
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ["file-loader"],
},
]
Хорошо, давайте сошлемся на шрифт в проекте, вsrc/
создать новыйfonts
папку и добавьте два файла шрифтов, каталог проекта станет следующим:
(два файла шрифтов взяты изОнлайн-шрифты Iconfontскачал)
webpack-basic
|- package.json
|- webpack.config.js
|- /dist
|- index.html
|- /src
|- fonts
+ |- webfont.woff
+ |- webfont.woff2
|- icon.png
|- index.js
существуетcss
Цитирую в:
@font-face {
font-family: 'MyFont';
src: url('./fonts/webfont.woff2') format('woff2'), url('./fonts/webfont.woff') format('woff');
font-weight: 600;
font-style: normal;
}
.color_red {
color: red;
font-family: 'MyFont';
background: url('./icon.png');
}
затем измените егоsrc/index.js
слово в:
// src/index.js
function createElement () {
element.innerHTML = '孔子曰:中午不睡,下午崩溃!孟子曰:孔子说的对!';
}
(Обратите внимание, в случае, если я украл его и использовал напрямуюОнлайн-шрифты Iconfontнаписано, это только для"孔子曰:中午不睡,下午崩溃!孟子曰:孔子说的对!"
Эти слова допустимы, но другие слова не подойдут, конечно, вы точно не сможете сделать это в реальном использовании)
Откройте страницу после переупаковки, и вы увидите только что представленный шрифт.
Это то же самое, что и на картинке, если шрифт не используется, он не будет выводиться наoutput
внутри.
3.4 Загрузка данных xml или csv
Помимо вышеперечисленногоcss
, изображения и шрифты, доступные ресурсы, которые могут быть загружены, также могут быть данными, такими как:JSON、CSV、TSV、XML
.
- Встроенная поддержка
JSON
Файлы, такие какimport Data from './data.json'
По умолчанию нормальная работа -
CSV和TSV
файл нужно использоватьcsv-loader
-
XML
файл нужно использоватьxml-loader
Поэтому, если вы хотите использовать его, сначала установите его:
$ npm i --save-dev csv-loader xml-loader
затем вwebpack.config.js
Средняя конфигурация:
rules: [
{
test: /\.(csv|tsv)$/,
use: ["csv-loader"],
},
{
test: /\.xml$/,
use: ["xml-loader"],
},
],
Теперь вы можете ссылаться прямо в проектеxml
файл:
import Data from './data.xml'
3.5 Загрузка текстовых данных txt
нагрузка.txt
Текстовые данные зависят отraw-loader
.
$ npm i --save-dev raw-loader
Затем настройте:
rules: [
{
test: /\.(csv|tsv)$/,
use: ["csv-loader"],
},
{
test: /\.txt$/,
use: "raw-loader",
},
],
цитата в это время.txt
файл, чтобы получить его содержимое:
import txt from './assets/file.txt'
export function print() {
console.log(txt) // 我是一段测试raw-loader的文本内容
}
если вы используетеfile-loader
иметь дело сtxt
файл, это будетtxt
Файл сжимается в бандл, и можно получить только путь к файлу:
import txt from './assets/file.txt'
export function print() {
console.log(txt) // 1474623111aaae6b31c08e1fedda68a3.txt
}
В-четвертых, результат управления
4.1 Несколько входов/выходов
В случае 👆 выше у нас есть только один входsrc/index.js
и выводdist/bundle.js
.
фактическиentry
а такжеoutput
Он поддерживает вас, чтобы иметь несколько входов и выходов.
Я воссоздал проектwebpack-html
.А по предыдущей комплектации только вводилwebpack 和 webpack-cli
затем вsrc
Создать подindex.js
а такжеprint.js
:
src/print.js:
export default function printMe() {
console.log("I' m printMe");
}
src/index.js:
import printMe from './print.js';
function component() {
var element = document.createElement('div');
element.innerHTML = 'Hello Webpack';
var btn = document.createElement('button');
btn.innerHTML = '点击我';
btn.onclick = printMe;
element.appendChild(btn);
return element;
}
document.body.appendChild(component());
Структура проекта на данный момент такова:
webpack-html
|- package.json
|- webpack.config.js
|- /src
|- index.js
|- print.js
Затем настройте егоwebpack.config.js
документ:
const path = require('path')
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
На данный момент я настроил два входаindex.js
а такжеprint.js
.
Что касается вывода, я использую[name].bundle.js
, чтобы после завершения упаковки был сгенерирован файл в следующем формате:
/dist
|- app.bundle.js
|- print.bundle.js
существуетdist
В этой папке естьapp.bundle.js
а такжеprint.bundle.js
.
Так что вы должны быть в состоянии понять это,[name]
соответствуетentery
место.
Тогда давайтеdist
создать новую папкуindex.html
файл и импортируйте два только что сгенерированныхjs
документ:
dist/index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack Output Management</title>
</head>
<body>
<script src="app.bundle.js"></script>
<script src="print.bundle.js"></script></body>
</html>
Тогда давайте откроем этоhtml
Взгляните на эффект, на странице отображается «Hello Webpack», а при нажатии на кнопку также будетconsole.log
.
Докажите, что два только что вывелиjs
Проблем с импортом файлов нет.
4.2 Настройка HtmlWebpackPlugin
Во всех вышеперечисленных случаях 👆 мы используем ручное созданиеindex.html
, а затем вывестиjs
файл импортировать этоhtml
.
На самом деле есть плагин, который позволяет нам избежать этого шага, т.е.html-webpack-plugin
основное использование
Сначала давайте установим его:
$ npm i --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: 'Webpack Output Management'
+ })
+ ],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
Теперь давайте удалим тот, который мы создали вручную ранееindex.html
, а затем выполнитьnpm run build
посмотри.
ОК👌, теперь он будет автоматическиdist
создается в папкеindex.html
, и это также поможет нам вывестиjs
импортируются в:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack Output Management</title>
</head>
<body>
<script type="text/javascript" src="app.bundle.js"></script>
<script type="text/javascript" src="print.bundle.js"></script></body>
</html>
Другие элементы конфигурации
существуетHtmlWebpackPlugin
в, кромеtitle
(настроеноindex.html
Помимо этого элемента конфигурации, существует множество других опций.
Например:
- имя файла {String } по умолчанию
index.html
, чтобы указать, что вы генерируетеindex.html
путь и имя; - template { String } по умолчанию '', иногда вы хотите написать свой собственный
index.html
файл, этот атрибут указывает путь к вашему шаблону. - favion {String} указывает, что вы генерируете
index.html
значок, конечно, если вы используетеtemplate
, это свойство можно использовать и без
Здесь я покажу использованиеfilename
а такжеtemplate
Посмотрим, какой будет эффект 😊.
Первый яsrc
Создал новый нижеindex.html
, это используется для написания шаблона:
src/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
</head>
<body></body>
</html>
затем измените его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: "Webpack Output Management",
+ filename: "admin.html",
+ template: "src/index.html",
}),
],
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist"),
},
};
Теперь, после выполнения инструкции по упаковке, сгенерированныйdist
Каталог файлов станет следующим:
/dist
+ |- admin.html
|- app.bundle.js
|- print.bundle.js
- |- index.html
4.3 Очистите папку /dist
После каждой сборки мы генерируемdist
папку, но если там остались файлы из истории, то она не будет автоматически очищена.
Теперь рекомендуемой практикой является очистка перед каждой сборкой./dist
папка,clean-webpack-plugin
Для этого используются плагины.
$ npm i --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({
+ cleanAfterEveryBuildPatterns: ["dist"], // 这个是非必填的
+ }),
new HtmlWebpackPlugin({
title: "Webpack Output Management",
filename: "assets/admin.html",
template: "src/index.html",
}),
],
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist"),
},
};
Если следовать методу установки на официальном сайте:
const CleanWebpackPlugin = require('clean-webpack-plugin');
...
new CleanWebpackPlugin(['dist'])
Тогда вы получите ошибку при упаковке:
TypeError: CleanWebpackPlugin is not a constructor
Я выяснил причину этого, если вы установилиclean-webpack-plugin
да3.0
Выше, вы должны использовать, как яconst { CleanWebpackPlugin } = require('clean-webpack-plugin')
ссылаются таким образом.
И настройте папку для очистки с помощьюcleanAfterEveryBuildPatterns
определять.
послесловие
Ты с нетерпением ждешь мира, надеюсь, у тебя нетbug
. Эта статья представлена здесь.
"这不是我,这不是我,这不是我"
если тебе тоже нравитсятупая девочкаПросто обратите внимание на публичный аккаунт ЛинаLinDaiDai
Или отсканируйте QR-код ниже👇👇👇 его😊.
Время от времени я буду обновлять некоторый внешний контент знаний и свои собственные оригинальные статьи🎉
Ваша поддержка - главная мотивация для меня продолжать творить 😊.
связанное предложение:
"Самый подробный учебник по bpmn.js во всей сети"
«[Предлагаемое изменение] Прочитав это, вы все еще не понимаете Вавилон, я пришлю вам маску»
В этой статье используетсяmdniceнабор текста