Введение
Зачем писать эту статью? Потому что сегодня в Nuggets Morning News есть статья оWebpackВступительная статья , прочитав ее, я обнаружил, что мне действительно следует ее изучить.Webpack, отсюда и эта статья.
я заwebpackпонимание ограничиваетсяvue-cliКонечно, они все готовые, и я никогда не эксплуатировал их сам.
Но по мере роста вы должны понимать это, а затем просто строить свои собственныеwebpackУпаковочный инструмент ...
- webpack (1) — понимание основных концепций
- webpack (2) - подробное объяснение элементов конфигурации
- ...
Первая попытка веб-пакета
Когда я впервые узнаю что-то новое, я сначала пойму три вопроса:
- что это такое;
- что он может сделать;
- Что означает каждый шаг в целом.
концепция
существуетwebpackДокументация определяет это так:
По сути, webpack — это сборщик статических модулей для современных приложений JavaScript. Когда webpack обрабатывает приложение, он рекурсивно строит граф зависимостей, содержащий каждый модуль, необходимый приложению, а затем объединяет все эти модули в один или несколько пакетов.
Нетрудно понять его значение по карте главной страницы официального сайта: все документы, такие как:JavaScript,CSS,SASS,IMG/PNGподожди, вWebpackЕсть модули в глазах, черезWebpackНастройте, объедините и упакуйте модули. проходить черезWebpackОбработка в конечном итоге выведет статические ресурсы, которые может использовать браузер.
Основная идея
Базовое понимание того, что естьWebpack, После того, что вы можете сделать, давайте начнем разбираться, как его использовать. следитьWebpackИзучение документа , прежде чем он будет официально использоваться, требует от нас понимания нескольких основных концепций:
- Входная запись
- Выходной результат
- Преобразователь модуля загрузчика
- Модуль модуль
- Блок кода фрагмента
- Плагин
Entry
entryявляется точкой входа конфигурационного модуля, указываетWebpackВыполните первый шаг сборки.
Можно настроить в конфигурационном файлеentryсвойство для указания одной или нескольких точек входа
Существует три типа записи: строка, массив, объект.
- String:"./src/entry"Модуль входного пути к файлу может быть относительным путем
- array : ["./src/entry1", "./src/entry2"]Путь к файлу модуля ввода, который может быть относительным путем. В отличие от строковых типов, массивы могут упаковывать несколько файлов в один файл.
- object:{ a: './src/entry-a', b: ['./src/entry-b1', './app/entry-b2']}Настройте несколько записей, по одной для каждой записиChunk
Output
outputНастройте способ вывода конечного желаемого кода.outputЯвляетсяobject, который содержит ряд элементов конфигурации.
- filenameИмя файла, используемое для выходного файла.
- pathАбсолютный путь к каталогу целевого вывода должен быть абсолютным путем.
модуль, загрузчик
модуль настраивает, как модули обрабатываются
Настроить загрузчик
Загрузчик можно рассматривать как транслятор с функцией преобразования файлов.Массив module.rules в конфигурации настраивает набор правил, чтобы указать Webpack, какой загрузчик использовать для загрузки и преобразования файлов, которые встречаются.
- useЗначение свойства должно быть массивом имен загрузчиков,LoaderПорядок исполнения сзади наперед;
- КаждыйLoaderможет пройтиURL querystringспособ передачи параметров, напримерcss-loader?minimizeсерединаminimizeРассказыватьcss-loaderвключатьCSSсжатие.
Plugins
Pluginдля расширенияWebpackфункции, различныеPluginпочти пустьWebpackМожет делать все, что связано со сборкой.
Настроить плагины
PluginКонфигурация очень простая,pluginsЭлемент конфигурации принимает массив, каждый элемент в массиве является элементом, который будет использоваться.Pluginпример,PluginНеобходимые параметры передаются через конструктор.
курс использованияPluginТрудность в том, чтобы овладетьPluginэлементы конфигурации предоставляются сами по себе, а не какWebpackсредний доступPlugin.
хочу чего-то добитьсяWebpackнет функции идтиgayHubИспытай удачу! О нет, даgithubИспытай удачу!
Chunk
Chunk, кодовый блок, то есть выходной файл после упаковки.
Webpackбудет для каждогоChunkвзять имя, которое может быть основано наChunkимя, чтобы различать имя выходного файла.
filename: '[name].js'
Входной файл, по умолчаниюchunknameдляmain. За исключением встроенных переменныхname,а такжеchunkСоответствующие переменные:
- id Chunkуникальный идентификатор для , начиная с 0
- name ChunkИмя
- hash Chunkоднозначно идентифицированныйHashстоимость
- chunkhash ChunkсодержаниеHashстоимость
Простая настройка веб-пакета
Как только вы поймете основные понятия, просто ведите машину, кашляйте, кашляйте и начинайте настоящий бой.
// ./webpack.config.js
module.exports = {
mode: 'development',
entry:{
app1: './src/index.js',
app2: './src/main.js'
},
output: {
path: __dirname + '/dist',
filename: '[hash][name].js'
},
module: {
rules: [
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
}
]
}
};
// ./src/index.css
html {
background: #333;
color: #fff;
}
// ./src/index.js
import './index.css'
const sleep = async time => await new Promise( resolve => {
setTimeout( () => {
console.log(`等待${time}s`)
return resolve
}, time*1000)
} )
sleep(5)
console.log(`Success!`)
// ./src/main.js
const sleep = async time => await new Promise( resolve => {
setTimeout( () => {
console.log(`等待${time}s`)
return resolve
}, time*1000)
} )
sleep(2)
// .babelrc
{
"presets": [
"es2015",
"stage-0"
],
"plugins": [
["transform-runtime", {
"polyfill": false,
"regenerator": true
}]
]
}
// package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"dependencies": {
"babel-core": "^6.26.3",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.11",
"style-loader": "^0.21.0",
"webpack": "^4.8.3",
"webpack-cli": "^2.1.3"
},
"devDependencies": {
"babel-loader": "^7.1.4",
"babel-plugin-transform-runtime": "^6.23.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Aditya",
"license": "ISC"
}
Приведенный выше код является первым, который я написалwebpackдемо, начать очень просто, поэтому я быстро настроил пакет, который можно упаковать в соответствии с документациейcss, es6, асинхронный/ожиданиеизWebpack.
Некоторые из этих зависимостей устанавливаются следующим образом
// npm i -D 是 npm install --save-dev 的简写
npm i -D webpack webapck-cli
npm i -D css-loader style-loader
npm i -D babel-loader babel-core babel-polyfill babel-preset-es2015 babel-preset-stage-0 babel-plugin-transform-runtime
css-загрузчик и загрузчик стилей
Проблемы, возникшие в процессе настройки: Код CSS запакован, но не действует.
Настроить в началеLoader, я только что написалcss-loader, потому что каштаны в блоге читаю, сегодня только пишуcss-loader, как известно вообще ничего не писалиCSSстиль = . знак равно
Поэтому я хорошо использовал поисковую систему в своей руке и узнал, что процесс должен быть таким:
Webpackпри встрече.cssконец файла используется первымcss-loaderчитатьCSSфайл, а затем передатьstyle-loaderПучокCSSсодержимое вводится вJavaScriptвнутри.
style-loaderПринцип работы примерно такой: поставитьCSSдля содержанияJavaScriptСтрока в магазине сохраняется и выполняется на веб-страницеJavaScriptпройти, когдаDOMдействовать динамично, чтобыheadвставить в тегstyleЭтикетка.
Поговорим о вавилоне
К пониманиюES 6Все учащиеся должны знать, что некоторые браузеры иNode.jsES6 уже поддерживается, но из-за ихES6Вся стандартная поддержка является неполной, что затрудняет использование всесторонне в разработкеES6. Обычно нам нужно преобразовать код, написанный на ES6, в хорошо поддерживаемый в настоящее время код.ES5код состоит из двух вещей:
- Реализуйте новый синтаксис ES6 с помощью ES5, например, синтаксис класса ES6 с прототипом ES5.
- Внедрение полифиллов в новые API-интерфейсы, например внедрение соответствующих полифиллов при использовании нового API-интерфейса выборки, чтобы браузеры начального уровня могли нормально работать.
BabelВышеупомянутые две вещи могут быть сделаны легко.BabelЯвляетсяJavaScriptкомпилятор, который можетES6код дляES5Код позволяет использовать новейшие функции языка, не беспокоясь о проблемах совместимости, и может быть гибко расширен в соответствии с потребностями с помощью механизма подключаемых модулей.
существуетBabelВ процессе компиляции он будет запускаться из корневого каталога проекта..babelrcКонфигурация чтения файла..babelrcЯвляетсяJSONФормат файла примерно следующий:
{
"presets": [
"es2015",
"stage-0"
],
"plugins": [
["transform-runtime", {
"polyfill": false,
"regenerator": true
}]
]
}
babel-loader
babel-loaderтребуется, вWebpackпройти черезLoaderдоступBabel, полное перекодирование
babel-preset-es2015 и babel-preset-stage-0
presetsсвойство говоритBabelКакие новые синтаксические функции используются в исходном коде, который необходимо преобразовать,PresetsОбеспечьте поддержку нового набора грамматических особенностей, большеPresetsМожно накладывать.PresetsНа самом деле группаPluginsколлекция каждогоPluginЗавершите преобразование новой грамматики.
- было написаноECMAScriptФункции в стандарте, поскольку новые функции добавляются в стандарт каждый год, можно разделить на:
- es2015 содержит новые функции, добавленные в 2015 году;
- es2016 содержит новые функции, добавленные в 2016 году;
- es2017 содержит новые функции, добавленные в 2017 году;
- es2017 содержит новые функции, добавленные в 2017 году;
- env содержит последние функции всех текущих стандартов ECMAScript.
- Функции, предложенные сообществом, но еще не вписанные в стандарт ECMAScript, которые делятся на следующие четыре типа:
- stage0 — просто красивая и радикальная идея, есть плагины Babel, которые реализуют поддержку этих возможностей, но я не уверен, что это будет установлено как стандарт;
- функции stage1 достойны включения в стандарт;
- stage2 Спецификация функций разработана и будет включена в стандарт;
- stage3 Спецификация функции завершена, и основные производители браузеров и сообщество Node.js приступили к ее реализации;
- этап 4 будет добавлен к стандарту в следующем году.
3. Чтобы поддерживать синтаксис в некоторых конкретных сценариях приложений, он не имеет ничего общего со стандартом ECMAScript.Например, babel-preset-react предназначен для поддержки синтаксиса JSX при разработке React.
babel-plugin-transform-runtime
Pluginсвойство говоритBableЧтобы использовать эти плагины, плагин может управлять преобразованием кода.
Официальное определение:babel-plugin-transform-runtimeдаBabelОфициальный плагин, роль которого заключается в сокращении избыточного кода. Но почему мы должны его использовать? В основном из-за использованияES 7изasyncфункция.
Поскольку подключаемый модуль компилятора среды выполнения делает три вещи:
- когда вы используетеgenerators/asyncфункция, она автоматически вводитсяbabel-runtime/regenerator.
- автоматическое введениеbabel-runtime/core-jsи картаES 6Статические методы и встроенные плагины.
- удалить встроенныйBabel helperи используйте модульbabel-runtime/helpersзаменять.
Конкретная информация о плагине:transform-runtime
Что касаетсяbabelДля других конкретных применений см.Официальная документация Babel
напиши в конце
дляWebpackНа этом первый шаг обучения завершен.Много материалов для чтения и слишком много вещей, которые нужно выучить.Я не могу вспомнить это какое-то время.Это прокладывает путь.
Добро пожаловать, чтобы указать на недостатки.