1.
Ввод указывает веб-пакету использовать какой файл в качестве отправной точки для начала упаковки, анализа и построения внутреннего графа зависимостей.
2.
Вывод указывает веб-пакету, куда выводить упакованные пакеты ресурсов и как их называть.
3. Веб-пакет загрузчика
может понимать только файлы JavaScript и JSON, что является встроенной возможностью веб-пакета, доступной «из коробки». Загрузчики позволяют веб-пакету обрабатывать файлы других типов и преобразовывать их в допустимые модули, которые могут использоваться приложениями и добавляться в граф зависимостей.
4.
ПлагиныПлагины можно использовать для выполнения более широкого круга задач. Плагины варьируются от оптимизации упаковки и сжатия до переопределения переменных в среде.
5. Mode
mode (Режим) указывает вебпаку использовать конфигурацию соответствующего режима.
Давайте подробно познакомим вас с пятью основными концепциями веб-пакета.
Объект записи используется веб-пакетом для поиска, запуска и сборки пакета. запись является отправной точкой приложения. С этой отправной точки приложение начинает выполнение. Если вы передадите массив, каждый элемент массива будет выполнен. Точка входа указывает, какой модуль веб-пакета следует использовать, чтобы начать построение внутреннего графа зависимостей. После входа в точку входа вебпак узнает, от каких модулей и библиотек зависит точка входа (прямо и косвенно).
Простое правило: у каждой HTML-страницы есть отправная точка. Одностраничное приложение (SPA): одна точка входа, многостраничное приложение (MPA): несколько точек входа.
Значение по умолчанию — ./src/index.js , но вы можете указать другую точку входа (или точки), настроив атрибут entry в конфигурации веб-пакета. Например:
//Одна запись — строка module.exports = {
запись: './path/to/my/entry/file.js',
};
//Несколько записей --array Module.exports = {
запись: ['./src/index.js', './src/add.js']
};
//Несколько записей --object Module.exports = {
вход: {
дом: './home.js',
о: './about.js',
контакт: './contact.js'
}
}; Тип значения записи:
строка: одна запись, упакованная в фрагмент, и в конце будет выведен только один файл пакета. Имя фрагмента по умолчанию — основной
массив: множественный, все файлы записей будут только. в конце сформируйте один чанк. Выведите файл пакета, и имя чанка по умолчанию будет основным. Обычно используется только в функции HMR, чтобы сделать горячее обновление HTML эффективным
объектом: несколько записей, столько фрагментов, сколько есть ключей, и столько же файлов пакета, и каждый ключ (ключ) будет именем фрагмента. В типе объекта значение каждого ключа также может быть массивом, а не просто строкой
output указывает веб-пакету, как и где выводить ваш пакет, актив и другие пакеты, которые вы упаковываете, или все, что загружается с помощью веб-пакета. . Значение выходного пакета по умолчанию — ./dist/main.js , а другие сгенерированные файлы по умолчанию помещаются в папку ./dist .
Вы можете настроить эти процессы, указав поле output в конфигурации:
//webpack.config.js.
константный путь = требуется ('путь');
модуль.экспорт = {
запись: './path/to/my/entry/file.js',
выход: {
путь: path.resolve(__dirname, 'dist'),
имя файла: 'my-first-webpack.bundle.js',
},
}; Мы можем сообщить веб-пакету имя пакета и место его создания через свойства output.filename и output.path .
2.1. имя_выходного_файла (имя и каталог файла)
Эта опция определяет каталог и имя каждого выходного пакета. Эти пакеты будут записаны в каталог, указанный опцией output.path .
Для одной точки入口имя файла будет статическим именем. Однако при создании нескольких пакетов с помощью нескольких точек входа, разделения кода или различных подключаемых модулей следует использовать другие методы, чтобы присвоить каждому пакету уникальное имя.
//Одна запись:
модуль.экспорт = {
//...
выход: {
имя файла: 'js/bundle.js'
}
};
//Несколько записей — используйте имя записи:
модуль.экспорт = {
//...
выход: {
имя файла: '[имя].bundle.js'
}
};
//Несколько записей — используйте уникальный хэш для создания модуля.exports = { в каждом процессе сборки
//...
выход: {
имя файла: '[имя].[хеш].bundle.js'
}
};
... 2.2. выходной путь (каталог файла)
выходной путь определяет каталог всех выходных файлов, который является общим каталогом для всех будущих выходных ресурсов. путь должен быть абсолютным путем.
модуль.экспорт = {
//...
выход: {
путь: path.resolve(__dirname, 'dist/assets')
}
} 2.3.output.publicPath (префикс пути к ресурсам, на которые ссылаются)
publicPath указывает префикс общедоступного пути, введенный всеми ресурсами в html-файле. Это не влияет на путь созданного файла. Вместо этого, когда в html-файле представлены различные ресурсы, publicPath добавляется в качестве префикса к пути импортируемых ресурсов.
Пример.
В конфигурации веб-пакета, созданной vue-cli, значение publicPath в производственной среде по умолчанию равно «/», что является корневым каталогом текущего каталога.
После упаковки мы открываем html-файл и видим, что путь к ресурсу, указанный в html-файле, следующий:
Как видите, перед путем добавляется символ /. Когда мы открываем браузер для доступа к сгенерированному html-файлу, мы обнаруживаем ошибку. Доступ к ресурсу невозможен, и появляется отчет 404. В это время доступ к ресурсу аналогичен следующему.
На сервере может быть так, но могут быть проблемы с доступом к нему.
Мы можем изменить publicPath на относительный путь или закомментировать его напрямую.
2.3.1. Разница между путем и publicPath.
打包后文件在硬盘中的存储位置，是webpack所有文件的输出的路径，必须是绝对路径。比如：输出的js、图片，HtmlWebpackPlugin生成的html文件等，都会存放在以path为基础的目录下。2.4. output.chunkFilename (имя невходного фрагмента)
output.chunkFilename определяет имя невходного файла фрагмента. То есть, в дополнение к фрагментам, созданным входным файлом, именуются файлы фрагментов, созданные другими файлами.
модуль.экспорт = {
//...
выход: {
chunkFilename: 'js/[name]_chunk.js' //Имя невходного чанка}
}; может упаковывать только файлы JavaScript и JSON ( webpack3+和webpack2+ имеют встроенную обработку файлов JSON, но webpack1+并不支持， необходимо добавить json-loader ). веб-пакет доступен «из коробки». Сам Webpack не поддерживает упаковку других типов файлов, таких как CSS, Vue и т. д., но мы можем использовать различные загрузчики, чтобы позволить Webpack обрабатывать эти типы файлов. Загрузчик может конвертировать файлы с разных языков (например, TypeScript) в JavaScript или преобразовывать встроенные изображения в URL-адреса данных. Загрузчик даже позволяет import файлы CSS непосредственно в модули JavaScript!
Используя различные loader , webpack имеет возможность вызывать внешние скрипты или инструменты для обработки файлов в разных форматах, таких как анализ и преобразование scss в css или преобразование файлов JS следующего поколения (ES6, ES7) в файлы JS, совместимые с современными браузерами. Для разработки React соответствующие загрузчики могут конвертировать файлы JSX, используемые в React, в файлы JS.
В конфигурации веб-пакета загрузчик имеет два атрибута:
test атрибут, который определяет, какие файлы будут преобразованы.
Атрибут use определяет, какой загрузчик следует использовать при выполнении преобразования.
include/exclude（可选）： вручную добавить файлы (папки), которые необходимо обрабатывать, или заблокировать файлы (папки), которые не нуждаются в обработке.
query（可选） : предоставить дополнительные параметры настройки для загрузчиков
// Пример: webpack.config js.
константный путь = требуется ('путь');
модуль.экспорт = {
выход: {
имя файла: 'my-first-webpack.bundle.js',
},
модуль: {
правила: [
{ тест: /.txt$/, загрузчик: 'raw-loader' },
{ test: /.css$/, use: ['style-loader', 'css-loader'] } // Если вы используете несколько загрузчиков, вам следует использовать use
],
},
} В приведенной выше конфигурации атрибут rules определен для отдельного объекта модуля, который содержит два обязательных атрибута: test и use . Это эквивалентно сообщению компилятору веб-пакета, что, когда он встречает путь, который анализируется как «.txt» в операторе require() / import , используйте raw-loader для его преобразования перед упаковкой.
Если вы используете несколько загрузчиков, вам следует использовать use. Загрузчики в массиве use выполняются по порядку: справа налево, последовательно. Например, в приведенном выше файле css сначала css-loader скомпилирует файл css в JS и загрузит его в файл JS, затем style-loader создаст тег стиля и вставит ресурсы стиля в JS в тег head.
3.1. CSS-загрузчик
Webpack предоставляет два инструмента для обработки таблиц стилей: css-loader и style-loader . Они решают разные задачи. css-loader позволяет вставлять файлы css, используя метод, аналогичный import . style-loader добавляет на страницу все рассчитанные стили. Комбинация этих двух методов позволяет встраивать таблицы стилей в файлы JS, упакованные с помощью веб-пакета. файл можно ввести в файл JS.
//Установите npm install --save-dev style-loader css-loader //Если версия css-loader слишком высокая, компиляция может пойти не так. Рекомендуется понизить доступную версию, например [email protected].
//Используйте модуль.exports = {
...
модуль: {
правила: [
{
тест: /(.jsx|.js)$/,
использовать: {
загрузчик: "babel-loader"
},
исключить: /node_modules/
},
{
test: /.css$/, //Как добавить несколько загрузчиков в один и тот же файл. Порядок действий загрузчиков таков, что более поздние загрузчики начинают действовать первыми, используя: [
{
загрузчик: "стиль-загрузчик"
}, {
загрузчик: «css-загрузчик»
}
]
}
]
}
} Предположим, что существует файл main.css:
body {;
фон: зеленый;
} Чтобы веб-пакет мог найти файл «main.css», мы импортируем его в «main.js» следующим образом:
//main.js
импортировать React из «реагировать»;
импортировать {render} из "реагировать-дом";
импортировать Greeter из './Greeter';
import './main.css';//Используйте требование для импорта файла css render(<Greeter />, document.getElementById('root')); Обычно css будет упакован в тот же файл, что и js, а не в файл Will. быть упакован в отдельный CSS-файл. Однако при соответствующей конфигурации веб-пакет также может упаковать CSS в отдельные файлы.
загрузчики используются для преобразования определенных типов модулей, тогда как плагины могут использоваться для выполнения более широкого круга задач, включая: оптимизацию упаковки, сжатие, управление ресурсами, внедрение переменных среды и т. д. Цель плагина — решить другие задачи, которых не может добиться загрузчик.
Чтобы использовать плагин, нам нужно установить его через npm , а затем добавить экземпляр плагина в свойство плагинов. Поскольку плагины могут содержать параметры/опции, вы должны передать new экземпляр свойству plugins в конфигурации веб-пакета. Большинство плагинов можно настроить с помощью параметров, и вы можете использовать один и тот же плагин несколько раз для разных целей в файле конфигурации.
//webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); // Установка через npm const webpack = require('webpack'); // Используется для доступа к встроенным плагинам mod.exports = {
модуль: {
правила: [{ test: /.txt$/, use: 'raw-loader' }],
},
плагины: [новый HtmlWebpackPlugin({шаблон: './src/index.html' })],
}; В приведенном выше примере html-webpack-plugin генерирует HTML-файл для приложения и автоматически внедряет все сгенерированные пакеты.
4.1. Плагин BannerPlugin (добавление заявления об авторских правах)
Ниже мы добавили плагин, который добавляет заявление об авторских правах в упакованный код. Этот плагин является встроенным в веб-пакет и не требует установки.
const webpack = require('webpack');
модуль.экспорт = {
...
модуль: {
правила: [
{
тест: /(.jsx|.js)$/,
использовать: {
загрузчик: "babel-loader"
},
исключить: /node_modules/
},
{
тест: /.css$/,
использовать: [
{
загрузчик: "стиль-загрузчик"
}, {
загрузчик: "css-загрузчик",
параметры: {
модули: правда
}
}, {
загрузчик: «postcss-загрузчик»
}
]
}
]
},
плагины: [
новый webpack.BannerPlugin('Вэньсюэхай, все права защищены, любое воспроизведение будет расследовано')
],
}; 4.2. Плагин «Горячая замена модуля»
Hot Module Replacement HMR) — очень полезный плагин в веб-пакете. Он позволяет автоматически обновлять и просматривать измененный эффект в реальном времени после изменения кода компонента. Горячая загрузка отличается от webpack-dev-server. Когда приложение запущено, горячая замена может просматривать эффект обновлений кода без обновления страницы, точно так же, как изменение стиля dom непосредственно в браузере, тогда как webpack-dev-server требует обновления. страница.
(1) Добавьте плагин HMR в файл конфигурации веб-пакета;
(2) Добавьте параметр «hot» на сервер разработки Webpack.
4.2.1. React реализует горячую загрузку
. Модули React могут использовать Babel для реализации горячей загрузки функций. . У Babel есть плагин под названием react-transform-hrm , который позволяет HMR правильно работать без дополнительной настройки модуля
react-transform-hmr
. -hmr
const webpack = require('webpack');
модуль.экспорт = {
запись: __dirname + "/app/main.js",//Единственный файл записи, который упоминался много раз, вывод: {
путь: __dirname + "/public",
имя файла: "bundle.js"
},
devtool: 'eval-source-map',
сервер разработчика: {
contentBase: "./public", // Каталог, в котором находится страница, загруженная локальным сервером. HistoryApiFallback: true, // Не переходить в строку: true,
жарко: правда
},
модуль: {
правила: [
{
тест: /(.jsx|.js)$/,
использовать: {
загрузчик: "babel-loader"
},
исключить: /node_modules/
},
{
тест: /.css$/,
использовать: [
{
загрузчик: "стиль-загрузчик"
}, {
загрузчик: "css-загрузчик",
параметры: {
модули: правда
}
}, {
загрузчик: «postcss-загрузчик»
}
]
}
]
},
плагины: [
new webpack.BannerPlugin('Авторские права, любое воспроизведение будет расследовано'),
новый webpack.HotModuleReplacementPlugin() // Плагин горячей перезагрузки],
} Настроить Babel
// .babelrc;
{
"presets": ["реакция", "env"],
"окр": {
"разработка": {
"плагины": [["реагировать-трансформировать", {
"трансформирует": [{
"transform": "реагировать-трансформировать-хмр",
"импорт": ["реагировать"],
"locals": ["модуль"]
}]
}]]
}
}
} //Приветствие,js
импортировать Реагировать, {
Компонент
} из «реагировать»
импортировать стили из «./main.css»
класс Greeter расширяет компонент {
оказывать() {
возвращаться (
<дел>
<h1>
аааа
</h1>
</div>
);
}
}
экспортировать приветствие по умолчанию //main.js
импортировать React из «реагировать»;
импортировать {
оказывать
} из «реакции-дома»;
импортировать Greeter из «./greeter.js»;
render( < Greeter / > , document.getElementById('root')); Теперь, если мы сможем реализовать модуль горячей загрузки, мы сможем видеть обновленный контент непосредственно в браузере каждый раз, когда сохраняем, и браузеру не нужно обновляться. Автоматическое обновление.
(Иногда эффекта нет, это может быть проблема с версией)
4.3. Плагин ExtractTextWebpackPlugin (извлечение CSS)
По умолчанию веб-пакет не рассматривает стиль CSS как независимый файл, но также упаковывает CSS в файл js. и упаковать сгенерированный файл. Когда файл js будет обработан, стиль будет вставлен на страницу в виде тега стиля через синтаксис js. Но в этом случае упакованный файл пакета может быть слишком большим. На данный момент мы можем использовать плагин ExtractTextWebpackPlugin для разделения стиля CSS в файл CSS.
Плагин ExtractTextWebpackPlugin переместит *.css, указанный во входном фрагменте (включая импортированный файл CSS и стиль, записанный в файле vue), в независимый и отдельный файл CSS. ExtractTextPlugin сгенерирует соответствующий файл CSS для каждого фрагмента записи. Это означает, что одна запись соответствует файлу CSS. Если существует несколько записей, будет создано несколько соответствующих файлов CSS.
С плагином ExtractTextWebpackPlugin ваши стили больше не будут встроены в пакет JS, а будут помещены в отдельный файл CSS (т. styles.css ). Если ваши файлы стилей больше по размеру, это ускорит раннюю загрузку, поскольку пакет CSS будет загружаться параллельно с пакетом JS.
const ExtractTextPlugin = require("extract-text-webpack-plugin");
модуль.экспорт = {
модуль: {
правила: [
{
тест: /.css$/,
используйте: ExtractTextPlugin.extract({
запасной вариант: "стиль-загрузчик",
используйте: «css-загрузчик»
})
}
]
},
плагины: [
новый ExtractTextPlugin({
имя файла: utils.assetsPath('css/[name].[contenthash].css'), //ExtractTextPlugin генерирует соответствующий файл для каждого фрагмента записи, поэтому при настройке нескольких фрагментов ввода необходимо использовать [ name], [id ] или [контентхэш]
// allChunks: true, // При использовании `CommonsChunkPlugin` и в общем чане есть извлеченные фрагменты (из `ExtractTextPlugin.extract`), для `allChunks` ** должно быть установлено значение `true`.
}),
]
} 4.3.1. Параметр allChunks (необходимо ли одновременно извлекать асинхронно загруженные стили)
Значение по умолчанию параметра allChunks подключаемого модуля ExtractTextWebpackPlugin равно false.
Параметр allChunks указывает, нужно ли извлекать вместе асинхронно загруженные стили. Потому что по умолчанию, даже если используется плагин ExtractTextWebpackPlugin, если стиль или файл стиля загружаются асинхронно, эти стили не будут извлечены в независимые файлы css, но все равно будут упакованы в файлы js.
Таким образом, allChunks:false — это значение по умолчанию. Значение по умолчанию — извлечь код из записи, но асинхронно загруженный код не будет извлечен; allChunks:true — это извлечение кода всех модулей (включая асинхронно загруженные модули). файл. Если используется асинхронная загрузка стилей, но для параметра allChunks установлено значение false, тогда нам нужно установить резервный вариант ExtractTextPlugin.extract. fallback — использовать style-loader для асинхронной загрузки, когда код CSS, загружаемый асинхронным кодом, не является. извлеченный стиль компонента.
См.:
https://github.com/sevenCon/blog-github/blob/master/articles/webpack, примечания к исследованию (2) – Использование ExtractTextWebpackPlugin.md
https://blog.csdn.net/weixin_41134409/article/ подробнее /88416356
Выбрав один из development , production или none для установки параметра mode , вы можете включить встроенную оптимизацию веб-пакета в соответствующей среде. Его значение по умолчанию — production .
модуль.экспорт = {
режим: «производство»,
}; Настройка параметра режима непосредственно в файле конфигурации укажет веб-пакету использовать встроенную оптимизацию соответствующего режима. Опции режима включают разработку, производство и отсутствие.
разработка: режим разработки, упакованный код не будет сжиматься, отладка кода включена.
производство: режим производства, как раз наоборот.
Установите режим разработки или производства, и веб-пакет автоматически установит значение процесса.env.NODE_ENV. Мы можем получить это значение непосредственно в любой папке. Но если вы установите только NODE_ENV , mode не будет установлен автоматически. (В узле глобальная переменная процесса представляет текущий процесс узла. Атрибутprocess.env содержит информацию о среде пользователя. Атрибут NODE_ENV не существует в самом процессе.env. Обычно мы сами определяем атрибут NODE_ENV и используем его, чтобы определить, является ли он является производственной средой или средой разработки)
(Обратите внимание: параметр режима является новым в webpack4. До версии 4 он устанавливался с помощью подключаемого модуля DefinePlugin. Webpack4 удалил DefinePlugin)
5.1. Конфигурация режима проекта vue-cli. подробно описано
в веб-пакете. Как правило, значение NODE_ENV будет настроено в файле конфигурации. В проекте vue, созданном по умолчанию с использованием vue-cli, конфигурация NODE_ENV выглядит следующим образом:
//В файле webpack.dev.conf.js в файле dev.env.js представлен новый webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}), //module.exports = merge(prodEnv, { в файле dev.env.js
NODE_ENV: '"разработка"'
}) // В файле webpack.prod.conf.js вводится файл prod.env.js const env = require('../config/prod.env')
новый веб-пакет.DefinePlugin({
'process.env': окр.
}), //module.exports = { в файле prod.env.js
NODE_ENV: '"производство"'
} Как видно из вышеизложенного, в среде разработки файл конфигурации устанавливает для NODE_ENV значение «разработка», в производственной среде файл конфигурации устанавливает для NODE_ENV значение «производство».
Когда мы запускаем проект, мы запускаем npm run dev или npm run build. Эти две команды используют файл конфигурации среды разработки или производственной среды для создания работающего проекта и соответственно настраиваем соответствующее значение NODE_ENV. Другими словами, мы запускаем проект. соответствующее значение NODE_ENV можно получить в любом файле проекта (не обязательно файле конфигурации, поскольку это зависит от того, вступил ли в силу файл конфигурации, настроенный со значением NODE_ENV).
5.2. Процесс конфигурации Process.env.NODE_ENV
является глобальной переменной узла, и процесс имеет атрибут env, но не имеет атрибута NODE_ENV. Переменная NODE_ENV недоступна напрямую в файлеprocess.env, но ее можно получить путем ее установки. Однако переменная NODE_ENV обычно используется для определения типа среды. Функция этой переменной такова: мы можем отличить среду разработки от производственной среды, оценивая эту переменную.
(1) Значения глобальных переменных можно установить с помощью встроенного плагина веб-пакета DefinePlugin:
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('производство')
}), после установки вы можете получить это значение в скрипте выполнения, например:
//main.js console.log(process.env.NODE_ENV); //производство
, но это значение невозможно получить в файле конфигурации веб-пакета webpack.config.js.
(2) Сначала загрузите пакет перекрестного окружения с помощью
настройки пакета перекрестного окружения:
cnpm i cross-env -D
Установите файл package.json:
"build": "cross-env NODE_ENV=test webpack --config webpack.config .js"
В настоящее время значение (process.env.NODE_ENV) можно получить в файле конфигурации, но нельзя получить в исполняемом скрипте. Его необходимо использовать с подключаемым модулем DefinePlugin.