«Эта статья участвовала в мероприятии Haowen Convocation Order, щелкните, чтобы просмотреть:Двойные заявки на внутреннюю и внешнюю стороны, призовой фонд в 20 000 юаней ждет вас, чтобы бросить вызов!"
🎨Предисловие
Как мы все знаем, в сегодняшнем все более сложном начальном проектировании инструменты модульной упаковки играют все более важную роль в нашей повседневной разработке, и среди них,webpackЭто уже лучший выбор для начальной упаковки и строительства.
Говоря оwebpack, многие мелкие партнеры могут показаться как знакомыми, так и незнакомыми, потому что он используется в каждом проекте, который мы разрабатываем. Странность в том,webpackЕму незнакома сложная конфигурация и различные функции.
Поэтому иногда нас сначала пугает эта сложная конфигурация, и это отбивает у нас желание учиться.
Однако в большой среде, где технологические обновления и итерации происходят так быстро,webpackЭтому все еще стоит учиться.
В следующей статье мы объяснимwebpackНачало работы с основными понятиями. Давайте учиться вместе~🎬
📅 1. Что такое вебпак
1. Пишите впереди
Когда мы хотим написать веб-страницу, сначала мы создадимindex.htmlфайл и, возможно, еще несколько позжеjsфайл, то мы будемhtmlфайл, импортируйте ихjsдокумент.
Только представьте, еслиjsФайлов много, а потом мы их импортируем по одному, а вдруг ошибка? Будет ли сложно определить, какой файл неправильный, что сделает эффективность разработки очень низкой.
Следовательно, естьwebpack.webpackНаписанный нами код будет переведен, а переведенный контент будет модульно упакован для разработки проекта.
Далее мы объясним,webpackЧто это такое и как его установить и использовать.
2. Что такое инструмент для упаковки модулей?
webpackиногда ошибочно принимают заjsпереводчик, а на самом делеwebpackНе одинjsпереводчик.
потому что это только знаетimportТакие похожие предложения, не зная другихjsРасширенный синтаксис. Так что, если вы называете этоjsПереводчик, на самом деле, мы смотрели на него высоко.
Глядя на официальное определение, мы можем обнаружить, чтоwebpackЯвляетсяинструмент для упаковки модулей,в то же времяwebpackтакже может поддерживатьcommonjsспецификация упаковки модуля.
Однако с течением времени и постоянным обновлением технологийwebpackуже не просто упаковкаjsизинструмент для упаковки модулей,webpackтеперь также поддерживаетcss文件,jpg,pngУпаковка различных файлов и т.д.
📐 Во-вторых, как создать среду с помощью Webpack
1. Установить узел
webpackосновывается наnodejsРазработанный инструмент упаковки модулей в основном состоит изnodeосуществленный. Итак, мы должны установитьnodeокружающая обстановка.Вот ссылка на официальный сайт, рекомендуется скачать стабильную версию
Затем запросите местныйnodeа такжеnpmversion, чтобы убедиться, что установка прошла успешно.
node -v
npm -v
2. Создайте проект
Сначала создайте проект, предполагается, что он называетсяwebpack-demo. тогда под проектСоздайте папку с помощью следующей команды:
mkdir webpack-demo
3. Инициализируйте проект
Войтиwebpack-demoфайл для инициализации проекта.Командная строка выглядит следующим образом:
cd webpack-demo
npm init 或 npm init -y //加-y表示默认自动配置项
весь путь послеEnterПросто вернись.
Вы можете увидеть структуру проекта, вышеперечисленные операции находятся вwebpack-demoфайл создалpackage.jsonфайл, после чего ставимpackage.jsonВнесите изменения в файл.Конкретный код выглядит следующим образом:
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
//将这个项目设置为私有
"private":true,
//"main": "index.js", //去掉入口文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
//写上作者名
"author": "Monday",
//保持项目私有
"license": "ISC"
}
4. Установите веб-пакет
Первый способ: глобальная установка
npm install webpack webpack-cli -g
Второй способ: установить под текущий проект
npm install webpack webpack-cli -D
Здесь предлагается выбрать второй способ установки. Так почему? из-за глобальной установкиwebpackЛюбые вопросы?
На самом деле глобальная установка установит только одну версию.
Итак, если мы хотим запустить два проекта сейчас, и эти два проекта кажутся изначально установленнымиwebpackВерсия другая, ставьте более низкую версиюwebpack, это может привести к тому, что он не запустится на нашем локальном компьютере. Поэтому для установки рекомендуется использовать второй способ.
После завершения установки мы должны запросить используемый в настоящее времяwebpackномер версии, чтобы убедиться, что мы успешно установили его.Конкретная командная строка выглядит следующим образом:
npx webpack -v
В это время некоторые друзья будут задавать вопросы, зачем нужно добавлять ещеnpxнайти номер версии.
Причина в том, что мы устанавливаем только в текущем проекте, поэтомуwebpackЭта команда не найдена глобально. а такжеnodeпри условииnpx,В настоящее времяnpxВы можете найти каталог проекта, который мы запускаемnode-moduleсерединаwebpackустановить пакет, таким образом, чтобы поставить нашwebpackустановлен внутри нашего проекта, а затем черезnpxбежатьwebpackВот и все.
5. Установите определенную версию веб-пакета
Если мы хотим установить конкретный номер версииwebpack, то сначала смотримwebpackинформация о номере версии.Команда выглядит следующим образом:
npm info webpack
После нахождения определенного номера версии используйте следующую команду для установки:
npm install webpack@4.16.5 webpack-cli -D //4.16.5表示版本号
⚙️ 3. Конфигурационный файл Webpack
1. Конфигурационный файл по умолчанию
Во многих случаях проект успешно выполняется до того, как мы напишем файл конфигурации. Это не потому, что не надо писать, аwebpackКоманда помогла нам написать много заранеефайл конфигурации по умолчанию, чтобы мы могли удовлетворить наши требования к использованию без слишком большой настройки при запуске проекта. Затем давайте вслед за всеми напишем конфигурационный файл.
Давайте узнаем о структуре проекта, когда мы создаем готовый проект, наш исходный код обычно размещенsrcпапка, а упакованные файлы обычно помещаются вdistфайл, покаwebpackфайл конфигурации с именемwebpack.config.js, и поместите его в корневой каталог проекта.
├── dist 放置打包后的文件
├── src 放置项目源代码
├── webpack.config.js webpack配置文件
├── package-lock.json
├── package.json
Прочитав структуру проекта, давайте посмотримwebpackизконфигурационный файлКак настроить.Конкретный код выглядит следующим образом:
//node的核心模块
const path = require('path');
module.exports = {
//设置为development时，代码不会进行压缩；设置为production时，代码会进行压缩。
mode:'production',
// 放置入口文件，明确怎么打包，要打包哪一个文件
entry: './src/index.js',
//entry: {
// main: './src/index.js'
//},
// 输出，表明webpack应该怎么输出，输出到哪个地方
output: {
filename: 'bundle.js',
// 指打包后的文件要放在哪个文件下
// __dirname表示该项目的根目录
path: path.resolve(__dirname, 'dist')
}
}
Поняв базовую конфигурацию, некоторые друзья в это время могут сомневаться в своих сердцах.webpackФайл конфигурации должен называться какwebpack.config.jsМожно ли назвать что-то другое?
ответ да, но нам нужно специальное лечение. Обычно, если мы называемwebpack.config.jsможно использовать напрямуюnpm webpackПриходите и запускайте наш проект. Если это имя не используется, предполагается, что это имяwebpackconfig.js, то мы можем упаковать наш конкретный проект с помощью следующей командной строки.
npx webpack --config webpackconfig.js
Приведенная выше командная строка означает:webpackПриходите и помогите нам упаковать, какой файл упаковать? кwebpackconfig.jsДля файла конфигурации, чтобы помочь нам package.
2. Используйте скрипт npm, чтобы упростить наш код упаковки.
Прочитав содержание выше, я верю в друзейwebpackиметь базовое понимание.
Затем представьте себе следующее, часто используйтеnpx webpackПриходите и помогите нам упаковать файлы, не будет ли это немного хлопотно?
Итак, давайте узнаем еще одну вещь: используйтеnpm scriptчтобы упростить наш код упаковки.
В корневом каталоге нашего проекта будетpackage.jsonфайл, этот файлкод показывает, как показано ниже:
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Monday",
"license": "ISC",
"devDependencies": {
"webpack": "^5.39.1",
"webpack-cli": "^4.7.2"
}
}
Все находят раздел скриптов.Далее мы внесем изменения в раздел скриптов. Конкретный код выглядит следующим образом:
"scripts": {
/* webpack 会先到node_module下面进行打包*/
"bundle": "webpack"
},
После завершения преобразования мы эквивалентныpackage.jsonЕсть конфигурацияnpm script, приведенный выше код означает этоscriptСоответствующее имяbundle,Потом,bundleНижний слой поможет нам выполнитьwebpack, и упаковать его.
После написания этого нам больше не нужно использоватьnpx webpackсделать пробежкуwebpack, вместо этого используйтеnpm run bundleвыполнить команду для упаковки.
3. Говоря о выходном содержании упаковки webpack
После объяснения вышеуказанного содержания, давайтеwebpackПосле упаковки некоторые выходные данные консоли суммируются.
| выходной контент | конкретное значение |
|---|---|
| hash | Представляет уникальное хеш-значение, соответствующее этой упаковке. |
| version | Представляет версию веб-пакета, используемого для этой упаковки. |
| time | Конкретные затраты времени на общую упаковку текущего проекта |
| assets | Упакованный файл, например: bundle.js |
| size | Размер упакованного файла |
| chunks | Поместите значение идентификатора вашего собственного соответствующего файла и значение идентификатора других файлов, представленных соответствующим файлом. |
| chunk Names | Основная соответствующая входной конфигурации |
🔑 Четыре, Погрузчик
1. Объяснение примеров
WebpackПо умолчанию нужно знать, как упаковатьjsмодуль, но он не знаетjpgКак упаковать этот файл.
В это время нам нужноwebpack.config.jsНастроить под файл, настроитьfile-loader. Добавляем новый в конфигурациюmodule.Конкретный код выглядит следующим образом:
module:{
rules:[{
test:/\.jpg$/,
use:{
loader:'file-loader'
}
}]
}
Далее проанализируемwebpackкак упаковатьjpgТакие статические файлы.
первыйwebpackвойдетsrcсодержание,newОдинindex.jsфайл, то теперь мы должны упаковать этот файл.
Итак, в командной строке я запустилnpm run bundle. когда ты бежишьnpm run bundleпри фактическом выполненииpackage.jsonвнутриscript,этоscriptпомогите нам бежатьwebpack,а потом,webpackПомогите нам сделать упаковку. В настоящее времяwebpackОн найдет соответствующую конфигурацию и поможет нам упаковать в соответствии с этой конфигурацией.
Итак, давайте посмотрим, если мы столкнемсяjsфайл, затемwebpackОн будет упакован по умолчанию. но? Если вы встретитеjpgкартина?webpackЯ был ошеломлен в это время,webpackне знаюjpgкод в этом формате.
Поэтому мы можем ссылаться на модуль модуля, чтобы помочь нам упаковать. Этот модуль называетсяfile-loader,file-loaderэтоloaderЭто может помочь нам завершить процесс упаковки.
Так что на самом деле,file-loaderНижний слой, что он нам помог?
когда мы упаковываемjpgфайл,webpackположитjpgфайл перемещен вdistфайл, и кjpgФайл получает новое имя. Затем он вернет имя в качестве возвращаемого значения переменной, которую мы импортировали в модуль.
Этоfile-loaderНизкоуровневый процесс обработки упакованных файлов.
Конечно.file-loaderне только может справитьсяjpgТакая файл-картинка. Теоретически он также может обрабатыватьМножество типов статических ресурсов.
2. Что такое загрузчик
проработанныйfile-loaderПосле этого я верю всемloader иметь базовое понимание. Итак, давайте разберемся с основным определением загрузчика.детали следующим образом:
самwebpackЯ не знаю, как работать с некоторыми файлами, ноloaderзнание. Итак, когда вы сталкиваетесь с некоторыми非jsфайл, как правило, перейти кloaderВот и все. Поэтому нам нужно позволитьwebpackпойти за помощьюloaderмодуль для идентификации非jsдокумент.
ЦитироватьwebpackПредложение официального китайского документа, в документе говорится:webpackмогу только понятьJavaScriptа такжеJSONфайл, этоwebpackПринесите свои собственные способности из коробки.loaderПозволятьwebpackСпособен обрабатывать другие типы файлов и преобразовывать их в эффективный модуль, длязаявлениеиспользуется, а также добавляется кграфик зависимостисередина. По сути,loaderэкспортируется как функцияJavaScriptмодуль.
3. Используйте загрузчик для упаковки статических ресурсов (изображений)
(1) Пользовательские именованные изображения
Если мы теперь хотим настроить имя упакованного образа, что нам делать?
мы вwebpack.config.jsпод файломmoduleДелайте улучшения.Конкретный код выглядит следующим образом:
module:{
rules:[{
test:/\.jpg$/,
use:{
loader:'file-loader',
options: {
//placeholder 占位符
name: '[name]_[hash].[ext]'
}
}
}]
}
по конфигурацииoptions, можно добиться эффекта пользовательского именования картинок.
(2) Пакет различных типов файлов изображений
Предположим, мы теперь не ограничиваемся упаковкойjpgфайл, а также хотите упаковать другие файлы изображений.Затем мы можем настроить его следующим образом:
module:{
rules:[{
test:/\.(jpg|png|gif)$/,
use:{
loader:'file-loader',
options: {
//placeholder 占位符
name: '[name]_[hash].[ext]'
}
}
}]
}
Добавляйте новые типы изображений с помощью регулярных выражений.
(3) упакованы в файлы изображений
Предположим, теперь мы хотим поместить упакованный файл вimageфайл, что мне делать?Конкретный код выглядит следующим образом:
module:{
rules:[{
test:/\.(jpg|png|gif)$/,
use:{
loader:'file-loader',
options: {
//placeholder 占位符
name: '[name]_[hash].[ext]',
//将jpg、png和gif图片文件，指定到dist目录下的images文件下
outputPath: 'images/'
}
}
}]
}
(4) URL-загрузчик
в использованииfile-loaderПосле этого изучим еще один пункт знаний:url-loader.url-loaderможет достигать почтиfile-loaderЭффект. Конкретное использование заключается в следующем:
npm i url-loader -D
module:{
rules:[{
test:/\.(jpg|png|gif)$/,
use:{
loader:'url-loader',
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/'
}
}
}]
}
мы просто устанавливаемurl-loader, а в конфигурации будетfile-loaderзаменитьurl-loaderВот и все.
Но стоит отметить, что использованиеurl-loaderПри упаковке нужно помнить о некоторых вещах.
когда вы идете, чтобы упаковатьjpgфайл, сfile-loaderРазница в том,url-loaderпреобразует изображение вbase64строку, а затем поместите ее прямо в нашdistв каталогеbundle.jsВнутри, отдельно не генерируя файл изображения.
Преимущество заключается в том, что вы можете получить к нему прямой доступ вместо того, чтобы переходить к папке, чтобы получить к нему доступ, что экономит ваше время.httpпросить.
Минус в том, что если этоjsЕсли файл очень большой, файл js, сгенерированный упаковкой, тоже будет очень большим, а затем загрузите этотjsвремя будет очень долгим.
так,url-loaderКаков наилучший способ использования?
Если изображение, которое мы представляем, маленькое, только1~2KBЕсли объем небольшой, то эта картинка начинается сbase64расфасован в видеjsфайл, это хороший выбор, нет необходимости повторно отправлять такое маленькое изображениеhttpпросить.
Но если изображение большое, старайтесь не использоватьurl-loaderПри использованииfile-loader, упакуйте этот образ в каталог dist, не упаковывайте его вbundle.jsв. Иначе получитсяbundle.jsФайл становится очень большим, что делает время загрузки очень долгим, что не способствует обслуживанию.
Другой способ заключается в том, что мы можем напрямуюurl-loaderЗатем добавьте еще одну конфигурацию:limit.Конкретный код выглядит следующим образом:
module:{
rules:[{
test:/\.(jpg|png|gif)$/,
use:{
loader:'url-loader',
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/',
//20480=>20KB
limit: 20480
}
}
}]
}
Из приведенного выше кода мы можем знать, что при использованииurl-loader, мы можем добавитьlimitАтрибуты. Тогда смысл приведенного выше кода заключается в том, что когда размер файла изображения больше, чем20KBкогда мы используемurl-loaderПакет. когда больше чем20KB, поместите файл изображения вdistизimagesпод файл.
4. Используйте Loader для упаковки статических ресурсов (статьи в стиле)
(1) Упакуйте файл css
Например, теперь мы хотим сделать изображение размером150*150, то нам нужно записать стили для изменения этого изображения. ЭтоwebpackКак упаковатьcssА файлы?
мы можем использоватьcss-loaderа такжеstyle-loaderдля упаковки файлов.Конкретная конфигурация выглядит следующим образом:
npm install sass-loader node-sass --save-dev
module:{
rules:[{
test:/\.(jpg|png|gif)$/,
use:{
loader:'file-loader',
options: {
//placeholder 占位符
name: '[name]_[hash].[ext]',
outputPath: 'images/'
}
}
},{
test:/\.css$/,
use:['style-loader', 'css-loader']
}]
}
css-loaderпоможет нам проанализировать, несколькоcssОтношения между файлами заканчиваются тем, чтоcssфайлы, объединенные в одинcss. Этоstyle-loaderКакова его роль?
в получилcss-loaderСгенерированоcssПосле файлаstyle-loaderбудет монтировать этот контент на страницеheadраздел и смонтируйте стили вheadсередина<style></style>в.
(2) Упакуйте файл sass
Если вы хотите упаковатьsassфайл, использоватьsass-loader,style-loaderа такжеcss-loaderЭти триloaderдля упаковки файлов.Конкретная конфигурация выглядит следующим образом:
npm install sass-loader node-sass --save-dev
module:{
rules:[{
test:/\.(jpg|png|gif)$/,
use:{
loader:'file-loader',
options: {
//placeholder 占位符
name: '[name]_[hash].[ext]',
outputPath: 'images/'
}
}
},{
test:/\.scss$/,
use:[
'style-loader',
'css-loader',
'sass-loader'
]
}]
}
Примечательно,loaderПорядок выполнения такойСнизу вверх, справа налево.
Итак, когда мы приступаем к выполнениюsassфайл, он сначала выполнитsass-loaderПосле этого,css-loader, и, наконец, выполнитьstyle-loader.
(3) Проблемы совместимости
Иногда, если мы хотим быть совместимыми с несколькими браузерами, мы можемcssдобавить в файл-webkit-и префиксы других производителей. Но ты знаешьwebpackНевозможно распознать эти префиксы. На этот раз мы узнаем о новомloader,то естьpostcss-loader, этот загрузчик может автоматически помочь нам добавитьпрефикс поставщикаИнформация.Конкретное использование заключается в следующем:
Сначала мы устанавливаемpostcss-loaderКонкретный код этой библиотеки выглядит следующим образом:
npm i postcss-loader -D
После завершения установки мы создаем новый файл в корневом каталоге проекта с именемpostcss.config.js, а затем настройте этот файл,код показывает, как показано ниже:
Установить первымautoprefixer:
npm install autoprefixer -D
После завершения установки мы находимся вpostcss.config.jsфайл вниз, чтобы использовать его,Конкретный код выглядит следующим образом:
module.exports = {
Plugin:[
require('autoprefixer')
]
}
Далее мыwebpack.config.jsфайл ниже, используйтеpostcss-loader.Конкретный код выглядит следующим образом:
module:{
rules:[{
test:/\.(jpg|png|gif)$/,
use:{
loader:'file-loader',
options: {
//placeholder 占位符
name: '[name]_[hash].[ext]',
outputPath: 'images/'
}
}
},{
test:/\.scss$/,
use:[
'style-loader',
'css-loader',
'sass-loader',
'postcss-loader'
]
}]
}
С помощью вышеперечисленных методов,webpack Когда вы помогаете нам упаковывать статические файлы, вы можете префиксировать соответствующие стили, которые должны быть префиксированы производителем.
5. Добавьте элементы конфигурации
Предположим, мы теперь хотим датьloaderДобавляем элементы конфигурации, например, хотим датьcss-loaderДобавьте элементы конфигурации, после чего мы можем обработать код следующим образом.Конкретный код выглядит следующим образом:
module:{
rules:[{
test:/\.(jpg|png|gif)$/,
use:{
loader:'file-loader',
options: {
//placeholder 占位符
name: '[name]_[hash].[ext]',
outputPath: 'images/'
}
}
},{
test:/\.scss$/,
use:[
'style-loader',
{
loader: 'css-loader',
options: {
//表明前面要先走sass-loader和postcss-loader
importLoaders: 2
}
},
'sass-loader',
'postcss-loader'
]
}]
}
Из приведенного выше кода видно, что когда мы хотим датьcss-loaderПри добавлении элементов конфигурации вместо использования формы строки мы преобразуем строку в объект. В объекте заполняем соответствующиеloaderа такжеoptionsКонфигурация, чтобы достичь требований, которые мы хотим.
Иногда мы находимся на странице, если импортировать глобальноcss, что легко может привести кконфликт стилей. Как справиться с этой ситуацией?
Для этого мы можем использоватьcss-loaderсерединаmodulesреализоватьcssмодульность, позволяющая внедрятьcssФайл имеет свой собственный модуль. Как его использовать конкретно?
module:{
test:/\.scss$/,
use:[
'style-loader',
{
loader: 'css-loader',
options: {
//表明前面要先走sass-loader和postcss-loader
importLoaders: 2,
modules: true
}
},
'sass-loader',
'postcss-loader'
]
}]
}
Из приведенного выше кода мы можем узнать, чтоmodules:trueЗаявление, вы можете включитьcssмодульная упаковка. После открытия мы можем импортировать под различные файлы.Метод импорта следующий:
import style from './index.scss';
var img = new Image();
img.src = bug;
img.classList.add(style.bug);
Из приведенного выше кода мы видим, что открытыйmoduleПосле этого можно указатьcssв содержании!
6. Как использовать webpack для упаковки файлов шрифтов
Иногда мы можем столкнуться с проблемой желания внедрить шрифты в проект, тогдаwebpackКак упаковать шрифты?Конкретный код выглядит следующим образом:
module:{
rules:[{
test: /\.(eot|ttf|svg)$/,
use: {
loader: 'file-loader',
}
}]
},
Из приведенного выше кода мы можем знать, что сwebpackСоответствующий статический формат файлаeot、ttf和svgи другие форматы, поэтому эти типы необходимо ввести. В то же время связанныеloaderдляfile-loader.
Научившись упаковывать статические ресурсы, рекомендуется ознакомиться с соответствующими разделами официальной документации.конкретный штамп ссылки~
5. Используйте плагины, чтобы сделать упаковку более портативной
1. html-webpack-плагин
научиться пользоватьсяloaderПосле упаковки статических файлов давайте взглянем наwebpack, как использоватьplugins Сделайте упаковку проще.
Когда мы упаковываем проект,webpackВсегда помещайте упакованное содержимое вdistПод содержанием. В это время нам также может понадобиться создать еще один самостоятельно.index.htmlдля импорта основных файлов. Это сделает его немного более хлопотным?
следовательно,webpackпредоставил намpluginплагин для решения этой проблемы.
Во-первых, давайте установимplugin,Конкретная командная строка выглядит следующим образом:
npm install html-webpack-plugin -D
Далее мы представляем плагинwebpack.config.jsсреди,Конкретный код выглядит следующим образом:
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [new HtmlWebpackPlugin({
//表明要引用哪一个模板
template: 'src/index.html'
})]
Теперь давайте разберемсяhtmlWebpackPluginКак помочь нам завершить автоматическую упаковку.
первый,htmlWebpackPluginОн автоматически сгенерируетhtmlдокумент. После этого упакуйте сгенерированныйjsфайлы автоматически импортируются в этотhtmlв файле.
Итак, в некотором смысле,pluginдопустимыйwebpackКогда он дойдет до определенного момента, он автоматически что-то сделает для вас. То есть в этот момент, когда мы закончили собираться,pluginавтоматически поможет нам создатьhtmlфайл для нашего непосредственного использования.
2. чистый-webpack-плагин
Иногда мы можемwebpack.config.jsИмя файла, соответствующее выводу в файле, изменено, что может легко привести к множественным конфликтам файлов в процессе упаковки.
Затем мы хотим добиться того, чтобы при упаковке сначала очистить исходную папку dist, а затем создать новую папку dist. Как с этим бороться? Смотри ниже.
Сначала давайте установим зависимостиclean-webpack-plugin,Конкретная командная строка выглядит следующим образом:
npm install clean-webpack-plugin -D
Далее мы представляем плагинwebpack.config.jsсреди,Конкретный код выглядит следующим образом:
const CleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [new HtmlWebpackPlugin({
//表明要引用哪一个模板
template: 'src/index.html'
}),new CleanWebpackPlugin(['dist'])]
С помощью приведенного выше кода мы можем сначала удалить его, когда будем упаковывать наш проект.distПапка, а затем создать новую папку.
🗞️ Шесть, вход и выход
Далее мы рассмотримwebpackсерединаentryа такжеoutputЕще несколько основных конфигураций.
module.exports = {
mode:'development',
// 放置入口文件，明确怎么打包
entry:{
main: './src/index.js',
sub: './src/index.js'
},
plugins: [new HtmlWebpackPlugin({
//表明要引用哪一个模板
template: 'src/index.html'
}),new CleanWebpackPlugin(['dist'])],
// 输出，表明webpack应该怎么输出
output: {
//如果把资源放在cdn下，则引入cdn
publicPath: 'http://cdn.com.cn',
//当entry有多个入口文件时，用[]可以输出多个文件
filename: '[name].js',
// 指打包后的文件要放在哪个文件下
path: path.resolve(__dirname, 'dist')
}
}
🗺️ 7. Исходная карта
1. Объяснение примеров
Иногда, когда мы пишем код, всегда есть необъяснимые ошибки. Глядя на красный отчет об ошибке на консоли, мое сердце всегда очень неудобно. В то же время, если мы не настраиваемwebpackЕсли так, то было бы ужасно найти ошибку.
Например, в режиме разработки мы по умолчаниюwebpack.config.jsНастройте, как показано ниже,Конкретный код выглядит следующим образом:
module.exports = {
mode:'development',
devtool: 'none',
entry:{
//打包到dist目录下的main.js
main: './src/index.js'
},
output: {
//用[]可以生成多个文件
filename: '[name].js',
// 指打包后的文件要放在哪个文件下
path: path.resolve(__dirname, 'dist')
}
}
Тогда, допустим, сейчас мы допустили ошибку в коде.console.logнаписано какconsele.log. А сейчасЭффект печати консоли выглядит следующим образом:
Как видите, ошибка на данный момент находится в запакованномmain.jsв файле96Ряд. Только представьте, если у нас много бизнес-кода, ошибка может идти вперед в файле.
Такая сцена не то, что мы хотим видеть. То, что мы хотим сделать, это, надеюсь,webpackПосле того, как упаковка завершена, ошибка выдается нам напрямую, и отображается соответствующий конкретный адрес файла. Это файл кода, в котором мы допустили ошибку, а не упакованный файл.main.js.
следовательно,webpackпредоставил намsourceMapЭта конфигурация решает эту проблему.
2. исходная карта
мы сейчас ставимdevtoolИзмените эту конфигурацию наsourceMap.Конкретный код выглядит следующим образом:
module.exports = {
mode:'development',
devtool: 'source-map',
entry:{
//打包到dist目录下的main.js
main: './src/index.js'
},
output: {
//用[]可以生成多个文件
filename: '[name].js',
// 指打包后的文件要放在哪个文件下
path: path.resolve(__dirname, 'dist')
}
}
После замены посмотримРезультат печати консоли:
Теперь вы можете видеть, изменить наsource-mapПосле настройки расположение отчета об ошибке переходит непосредственно в каталог, где мы написали код, то естьindex.js. вместо того, чтобы искать иголку в стоге сенаmain.jsНайдите внутри.
3. Общая конфигурация sourceMap
Прочитав приведенный выше пример, я считаю, что все правыSourceMapиметь определенное понимание. Далее давайте посмотримsourceMapНекоторые распространенные конфигурации .Подробнее см. ниже:
| SourceMap | имея в виду |
|---|---|
| inline-source-map | Отображать как строки, так и столбцы, когда сообщается об ошибке |
| cheap-inline-source-map | Когда я сообщаю об ошибке, я знаю только, какая строка неверна, а не какой столбец |
| cheap-module-source-map | Лучшие практики для производственных сред, не только управлять ошибками собственного бизнес-кода, но и другими другими ошибками, такими как загрузчик, ошибки других сторонних модулей и т. д. |
| eval | Eval — это самый быстрый способ упаковки, но если бизнес-код более сложный, эффект от использования eval может быть неполным. |
| module-eval-source-map | Используйте модуль, чтобы показать не только бизнес-ошибки, но и загрузчик, сторонние ошибки и т. д. |
| cheap-module-eval-source-map | Лучшие практики среды разработки |
🧱8. Используйте WebpackDevServer для повышения эффективности разработки
1. --смотреть
На самом деле, если мы не используемWebpackDevServerЕсли мы разработаем его таким образом, то каждый раз, когда мы хотим просмотреть скомпилированный результат выполнения, нам нужно сначала скомпилировать командную строку.npm run bundleкоманду, затем откройтеdistв каталогеindex.htmlфайл можно просмотреть повторно. Таким образом, неизбежно, что эффективность будет низкой. Какой результат мы ожидаем?
мы кладемpackage.jsonв файлеscriptсделать макияж,Конкретный код выглядит следующим образом:
"scripts": {
"watch": "webpack --watch",
"bundle": "webpack"
},
Как видно из приведенного выше кода,webpackдобавить после--watchполе, затем запуститьnpm run watch, вы можете изменять код каждый раз,webpackЧтобы добиться автоматического мониторинга, вместо повторного запуска команды каждый раз, когда код изменяется, как в прошлом.webpackупаковать.
2. Webpack DevServer
Однако этот метод может быть недостаточно дружелюбным, ведь разработчики всегда ленивы и стараются позволить программе делать всю работу, а не делать ее вручную.
На самом деле мы хотим добиться того, чтобы при запускеnpm run watchКогда используется эта строка команды, она может не только автоматически помочь нам реализовать упаковку, но также помочь нам открыть консоль и смоделировать некоторые функции на сервере. тогда мы можем пройтиwebpackDevServerдля достижения желаемого эффекта. как использоватьwebpckDevServerШерстяная ткань? Подробнее см. ниже.
(1) Установка WebPackDevserver
Теперь мы проектируем установку WebPackDevserver,Конкретная командная строка выглядит следующим образом:
npm install webpack-dev-server -D
(2) Настройте файл package.json
Далее мы настраиваемpackage.jsonдокументscript.Конкретный код выглядит следующим образом:
"scripts": {
"watch": "webpack --watch",
"start": "webpack-dev-server"
},
(3) Настройте файл веб-пакета
Далее настроимwebpack.config.jsдокумент,Конкретный код выглядит следующим образом:
module.exports = {
mode:'development',
devtool: 'source-map',
// 放置入口文件，明确怎么打包
entry:{
main: './src/index.js'
},
devServer: {
contentBase: './dist',
// 当运行完npm run start时，会自动的帮我们打开浏览器
open: true
},
output: {
//用[]可以生成多个文件
filename: '[name].js',
// 指打包后的文件要放在哪个文件下
path: path.resolve(__dirname, 'dist')
}
}
Итак, теперь давайте посмотрим,webpackDevServerКак сделать, чтобы автоматически открывался браузер.Подробности смотрите на картинке ниже:
Все могут видеть, черезwebpackDevServer, он не только будет следить за тем, чтобы наши файлы изменились, но и переупаковывать их для нас. При этом будет такжеАвтоматически помогите нам обновить браузер, И воляАвтоматически помогать нам открыть браузер. Так что используйте его, вы можетеЗначительно повысить эффективность разработки нашего кода.
(4) Настройте номер порта
webpackDevServerНомер порта по умолчанию для нашего сервера8080, если мы хотим изменить его на другой номер порта, что нам делать?
нам нужно изменитьwebpack.config.jsпод файломDevServer,Конкретный код выглядит следующим образом:
module.exports = {
mode:'development',
devtool: 'source-map',
// 放置入口文件，明确怎么打包
entry:{
main: './src/index.js'
},
devServer: {
contentBase: './dist',
// 当运行完npm run start时，会自动的帮我们打开浏览器
open: true,
//修改端口号
port: 3000
},
output: {
//用[]可以生成多个文件
filename: '[name].js',
// 指打包后的文件要放在哪个文件下
path: path.resolve(__dirname, 'dist')
}
}
нам просто нужноdevServerдобавитьportконфигурация для достиженияпользовательский номер порта.
Также стоит отметить, что когда мы используемwebpackDevServerПри упаковке нашего проекта он не будет сгенерирован автоматическиdistкаталог, так почему это? использоватьwebpackDevServerУпакованный проект будет размещен в нашемОЗУВ некоторой степени это может эффективно повысить скорость упаковки проекта и сделать упаковку быстрее.
🌡️9.Горячая замена модуля
1. Объяснение примеров
Предположим, теперь мы хотим реализоватьновый элементФункция, которая достигается этой функцией, состоит в том, чтобы добавлять новый текст каждый раз, когда нажимается кнопка.item.Конкретный код реализации выглядит следующим образом:
файл index.js:
import './style.css';
var btn = document.createElement('button');
btn.innerHTML = '新增';
document.body.appendChild(btn);
btn.onclick = function(){
var div = document.createElement('div');
div.innerHTML = 'item';
document.body.appendChild(div);
}
файл style.css:
div:nth-of-type(odd){
background: yellow;
}
Эффект отображения браузера в это времяКак показано ниже:
Предположим, теперь мы меняем цвет фона CSS, например фиолетовый.Конкретный код выглядит следующим образом:
div:nth-of-type(odd){
background: purple;
}
На этом этапе, после сохранения, браузер будет снова обновляться после каждогоitemопять такиappendЗаходи.Как показано ниже:
В этом случае это может быть не тот результат, который нам нужен. Мы надеемся, что всеitemОбновление не выполняется, и когдаcssПри изменении стиля соответствующийitemЦвета также можно изменить. Тогда это приводит кwebpackDevServerКонтент в: Горячие обновления модулейHot Module Replacement. Далее давайте разберемся с конфигурацией, связанной с горячим обновлением модуля.
2. Конфигурация горячего обновления модуля
Горячее обновление модуля, а именно замена горячего модуля, именуемоеHMR.
Далее мыwebpack.config.jsпапка для настройки.Конкретный код выглядит следующим образом:
//node的核心模块
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports = {
mode:'development',
devtool: 'source-map',
// 放置入口文件，明确怎么打包
entry:{
main: './src/index.js'
},
devServer: {
contentBase: './dist',
// 当运行完npm run start时，会自动的帮我们打开浏览器
open: true,
port: 8080,
// 让我们的webpackDevServer开启hotModuleReplacement这样子的功能
hot: true,
// 即便HMR没有生效，也不让浏览器自动刷新
hotOnly: true
},
module:{
rules:[{
test:/\.(jpg|png|gif)$/,
use:{
loader:'file-loader',
options: {
//placeholder 占位符
name: '[name]_[hash].[ext]',
outputPath: 'images/',
limit: 10240
}
}
},{
test:/\.scss$/,
use:[
'style-loader',
{
loader: 'css-loader',
options: {
//表明前面要先走sass-loader和postcss-loader
importLoaders: 2,
modules: true
}
},
'sass-loader',
'postcss-loader'
]
},{
test:/\.css$/,
use:[
'style-loader',
'css-loader',
'postcss-loader'
]
}]
},
plugins: [new HtmlWebpackPlugin({
//表明要引用哪一个模板
template: 'src/index.html'
}),new CleanWebpackPlugin(['dist']),
new webpack.HotModuleReplacementPlugin()
],
// 输出，表明webpack应该怎么输出
output: {
// 下载middle：npm install express webpack-dev-middleware -D
publicPath: '/',
//用[]可以生成多个文件
filename: '[name].js',
// 指打包后的文件要放在哪个文件下
path: path.resolve(__dirname, 'dist')
}
}
Из приведенного выше кода мы можем знать, что конфигурацияdevServerвнизhotа такжеhotOnly,так же какpluginsвнизnew webpack.HotModuleReplacementPlugin(), для достижения эффекта горячего обновления модуля.
Далее давайте посмотрим на эффект браузера после настройки.Подробности смотрите на картинке ниже:
Как видите, после добавления этих конфигурацийitemОн не будет обновляться снова, но стиль будет изменен на исходной основе.
📀10. Используйте Babel для обработки синтаксиса ES6
1. Преобразование синтаксиса ES6 в синтаксис ES5
Двигаясь дальше, давайте узнаем, как использовать webpack и babel для написания синтаксиса ES6.
Как мы все знаем, спецификация синтаксиса ES6 была официально опубликована в 2015 году. Поэтому иногда не все браузеры поддерживают синтаксис ES6. Поэтому сейчас мы хотим иметь возможность преобразовывать синтаксис ES6 в синтаксис ES5 при связывании с webpack. Таким образом, когда проект запущен, браузер не сообщит об ошибке.
Так как же добиться такой упаковки? Дальше разберемся вместе.
Сначала мы открываемофициальный сайт бабеля, по шагам мы шаг за шагом вwebpackиспользуется вbabel.
первый шаг:Установитьbabel-loaderа также@babel/coreэти две библиотеки.Конкретный код выглядит следующим образом:
npm install --save-dev babel-loader @babel/core
babel-loaderЭто инструмент, помогающий упаковывать и использовать webpack, а также@babel/coreявляетсяbabelосновная библиотека, которая позволяетbabelидентифицироватьjsсодержание кода, а затемjsкод вASTАбстрактное синтаксическое дерево, а затем скомпилируйте абстрактное синтаксическое дерево в новый синтаксис.
Шаг 2:существуетwebpack.config.jsДобавьте правила к элементам конфигурации в файле.Конкретный код выглядит следующим образом:
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
третий шаг:Установить@babel/preset-env.Конкретный код выглядит следующим образом:
npm install @babel/preset-env --save-dev
Зачем устанавливать этот модуль? На самом деле, когда мы используемbabel-loaderПри работе с файлами, на самом делеbabel-loaderТолькоwebpackа такжеbabelМост для связи между ними, он просто открывает нам канал, но не помогает нам соединитьсяES6Синтаксис преобразуется вES5синтаксис. Поэтому нам также нужно использовать некоторые другие модули для выполнения этой работы. Этот модуль - то, о чем мы говорили ранее,preset-env.
babel/preset-env, включая всеES6Перевести вES5Грамматические правила, упакованные с этим модулем, мы можем поместить все нашиjsсерединаES6Код преобразуется вES5. Конкретную конфигурацию см. выше.второй шаг.
2. Babel-полифилл
С помощью вышеуказанных методов мы можем добиться эффекта преобразования синтаксиса ES6 в синтаксис ES5. Однако проблема, которую мы также должны учитывать, заключается в том, что если мы сталкиваемся с новыми синтаксическими переменными, такими как промисы, или функциями, такими как карта в массивах, в браузерах с низкими версиями, они на самом деле не существуют. Хотя мы сделали объяснение грамматики и перевод грамматики, но только часть перевода. Также есть некоторые объекты и функции, недоступные в младших версиях браузеров.
Итак, в настоящее время мы не только должны использоватьbabel/preset-envсделать преобразование синтаксиса, но такжеДобавьте эти отсутствующие переменные и функции в браузеры более ранних версий..
Итак, как добавить, в это время нам нужно использоватьbabel-polyfillэтот инструмент для дополнения.babel-polyfillПредназначен для реализации вещей, которые не поддерживаются браузерами.原生API的代码. Далее мы объясним, как использовать этот модуль.
Шаг 1: Найдитеофициальная документация,Установитьbabel-polyfill.Конкретный код выглядит следующим образом:
npm install --save @babel/polyfill
Шаг 2: Импортируйте модуль.Конкретный код выглядит следующим образом:
import "@babel/polyfill";
Обычно этот код размещается в проекте.jsпод входным файлом.
Шаг 3: Модернизацияwebpack.cofig.jsпод файломmodule, уменьшая размер упаковки.Конкретный код выглядит следующим образом:
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: [['@babel/preset-env'],{
useBuiltIns: 'usage'
}]
}
}
}
]
}
Этот код означает, что при использованииbabel-polyfillПри наполнении фич младших версий браузеров не нужно добавлять все фичи, а решать, что добавлять согласно нашему бизнес-коду.
в то же время,babel-presetЕсть также много других свойств конфигурации, которые стоит изучить, которые здесь не рассматриваются. Каждый может прийтиофициальная документацияПроверьте это~
📚Одиннадцать, заключительные замечания
Когда я закончил писать эту статью, я вдруг вспомнил интервьюера в прошлом интервью. На заключительном риторическом сеансе спросите его оwebpackпроблема, сказал онwebpackКак правило, этим будут заниматься сотрудники, знакомые с бизнесом компании, ведь фронтенд-инжиниринг — это не детская игра.
В то время у меня не было особого чувства, но теперь, когда я узнал об этом, я вдруг подумал об этой сцене. Это правда, я узнал меньше, чем верхушка айсберга, я уже почувствовалwebpackогромный проект. Если во время упаковки возникает проблема с конфигурацией в небольшом месте, это может привести к выходу из-под контроля всего проекта. (Конечно, в нормальных условиях такой ситуации не бывает, и слова серьезные...)
изучениеwebpackпроцесс, чтобыОпределите версию веб-пакета, которую вы используете.. Например, я только начал спотыкаться в понедельник, и я чувствую, что версия 4 и версия 5 похожи. но дляwebpackЯ имею в виду, это полная шутка об этом. Каждая зависимость имеет версии 4 и 5, а не ту, которую вы хотите использовать. Если вы используете его без разбора, вы можете незримо сообщить об ошибке до такой степени, что усомнитесь в своей жизни...
Поэтому обязательно используйтеwebpackВерсия, используемая при упаковке, и при использованииnpmТакже необходимо найти соответствующую версию, чтобы использовать ее, чтобы уменьшить количество ошибок.
На данный момент супер-вводные знания о веб-пакете здесь! Надеюсь, это поможет всем~
Код этой серии статей загружен в публичный аккаунт, а ключевые слова отвечают в фоновом режиме.webpackВы можете получить это~
🐣Пасхальное яйцо Еще одна вещь
Рекомендовано в прошлом
Дополнительно
- Обратите внимание на публичный аккаунтЛаборатория понедельника, обратите внимание на изучение сухих товаров в первый раз,Другие рекомендуемые столбцы ждут вас, чтобы разблокировать~
- Если эта статья будет вам полезна, помнитеоставить след джиоиди снова~
- Это все для этой статьи! Увидимся в следующий раз! 👋👋👋