Три длинные статьи помогут вам разблокироватьWebpack, я надеюсь, что прочитав эти три статьи, вы сможетеwebpackКонфигурация имеет более четкое понимание.
1. Что такое веб-пакет?
webpackсовременныйJavaScriptСборщик статических модулей приложения, когдаwebpackКогда приложение обрабатывается, рекурсивно строится граф зависимостей, содержащий все модули, необходимые приложению, и эти модули упаковываются в один или несколько модулей.bundle.
2. Основные концепции веб-пакета
- запись: запись
- вывод: вывод
- загрузчик: преобразователь модулей, используемый для преобразования исходного содержимого модуля в новое содержимое по мере необходимости.
- Плагины: плагины расширения, которые внедряют логику расширения в определенное время в процессе сборки веб-пакета, чтобы изменить результат сборки или сделать то, что вы хотите.
3. Инициализируйте проект
Создайте новую папку, например:webpack-first(Конечно, вы можете использовать любое имя проекта, которое вам нравится). Рекомендуется обратиться к этой статье для пошаговой настройки, не ищите всегда лучшую конфигурацию в интернете, вы ее освоилиwebpackПосле этого конфигурация в соответствии с вашими потребностями является лучшей конфигурацией.
Адрес проекта, соответствующий этой статье (используется при написании этой статьи):GitHub.com/Иветт Л.А. У/И…
использоватьnpm init -yдля инициализации (вы также можете использоватьyarn).
нужно использоватьwebpack, то он должен быть установленwebpack,webpack-cli:
npm install webpack webpack-cli -D
Ввиду быстрых изменений в передовых технологиях, эта статья основана наwebpackномер версии:
├── webpack@4.41.5
└── webpack-cli@3.3.10
отwepack V4.0.0Начинать,webpackОн работает «из коробки» и может использоваться без внесения каких-либо файлов конфигурации.
новыйsrc/index.jsфайл, давайте напишем все, что мы хотим в файле:
//index.js
class Animal {
constructor(name) {
this.name = name;
}
getName() {
return this.name;
}
}
const dog = new Animal('dog');
использоватьnpx webpack --mode=developmentсборка, по умолчаниюproductionрежиме, чтобы более четко видеть упакованный код, мы используемdevelopmentмодель.
Вы можете видеть, что в проекте больше элементовdistкаталог, который содержит упакованный файлmain.js.
webpackСуществуют конфигурации по умолчанию, такие как файл ввода по умолчанию./srcПакет по умолчанию дляdist/main.js. Другие конфигурации по умолчанию можно просмотреть:node_modules/webpack/lib/WebpackOptionsDefaulter.js.
Проверитьdist/main.jsфайл, вы можете видеть,src/index.jsне экранируется в код более низкой версии, что явно не то, что нам нужно.
{
"./src/index.js":
(function (module, exports) {
eval("class Animal {\n constructor(name) {\n this.name = name;\n }\n getName() {\n return this.name;\n }\n}\n\nconst dog = new Animal('dog');\n\n//# sourceURL=webpack:///./src/index.js?");
})
}
4. Переключить JS на более низкую версию
Раньше мы говорилиwebpackиз четырех основных концепций, одна из которыхloader,loaderИспользуется для преобразования исходного кода, что нам сейчас и нужно.
Чтобы преобразовать код JS в более низкую версию, нам нужно использоватьbabel-loader.
babel-loader
Сначала установите егоbabel-loader
npm install babel-loader -D
Кроме того, нам также необходимо настроитьbabel, для чего мы рассчитываем установку на следующее:
npm install @babel/core @babel/preset-env @babel/plugin-transform-runtime -D
npm install @babel/runtime @babel/runtime-corejs3
Для тех, кто не знаком с настройкой babel7, можно прочитать эту статью:Незабываемые знания Babel7
новыйwebpack.config.js,следующим образом:
//webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.jsx?$/,
use: ['babel-loader'],
exclude: /node_modules/ //排除 node_modules 目录
}
]
}
}
рекомендоватьloaderуточнитьincludeилиexclude, можно указать один из них, т.к.node_modulesКаталог обычно не требует компиляции, после исключения эффективность компиляции значительно повышается.
Здесь мы можем.babelrcнаписано наbabelконфигурацию также можно найти вwebpack.config.jsв конфигурации.
Создать .babelrc.
Конфигурация выглядит следующим образом:
{
"presets": ["@babel/preset-env"],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs": 3
}
]
]
}
Теперь повторно выполняемnpx webpack --mode=development,Проверитьdist/main.js, вы обнаружите, что код JS был скомпилирован в младшую версию.
Настроить babel в webpack
//webpack.config.js
module.exports = {
// mode: 'development',
module: {
rules: [
{
test: /\.jsx?$/,
use: {
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env"],
plugins: [
[
"@babel/plugin-transform-runtime",
{
"corejs": 3
}
]
]
}
},
exclude: /node_modules/
}
]
}
}
Вот несколько замечаний:
-
loaderВам нужно настроитьmodule.rulesсередина,rulesпредставляет собой массив. -
loaderФормат:
{
test: /\.jsx?$/,//匹配规则
use: 'babel-loader'
}
Или это может быть так:
//适用于只有一个 loader 的情况
{
test: /\.jsx?$/,
loader: 'babel-loader',
options: {
//...
}
}
testПоля соответствуют правилам и обрабатываются для файлов, соответствующих правилам.
useСуществует несколько способов записи поля
- Может быть строкой, такой как выше
use: 'babel-loader' -
useПоля могут быть массивом, например обработка файлов CSS,use: ['style-loader', 'css-loader'] -
useКаждый элемент массива может быть либо строкой, либо объектом, когда нам нужноwebpackв конфигурационном файлеloaderДля настройки нужно написать его как объект, а в файле объектаoptionsполя, такие как:
rules: [
{
test: /\.jsx?$/,
use: {
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env"]
}
},
exclude: /node_modules/
}
]
Выше мы говорили о том, как скомпилировать JS-код в обратно совместимый код, конечно, вам также могут понадобиться некоторые другиеbabelплагины и пресеты, такие как@babel/preset-react,@babel/plugin-proposal-optional-chainingподожди, но,babelКонфигурация не является предметом этой статьи, мы переходим к следующей.
Не говорите, что осторожные друзья, даже беспечные друзья должны были узнать, мы используемwebpackПри упаковке он всегда был запущенnpx webpack --mode=developmentЭто возможноmodeнастроен вwebpack.config.jsВ этом? Это вполне возможно.
5.mode
Будуmodeувеличить доwebpack.config.jsсередина:
module.exports = {
//....
mode: "development",
module: {
//...
}
}
modeэлемент конфигурации, сообщитьwebpackИспользуйте встроенные оптимизации для соответствующего режима.
modeЭлемент конфигурации поддерживает следующие две конфигурации:
-
development:Будуprocess.env.NODE_ENVЗначение установлено наdevelopment, включитьNamedChunksPluginа такжеNamedModulesPlugin -
production:Будуprocess.env.NODE_ENVЗначение установлено наproduction, включитьFlagDependencyUsagePlugin,FlagIncludedChunksPlugin,ModuleConcatenationPlugin,NoEmitOnErrorsPlugin,OccurrenceOrderPlugin,SideEffectsFlagPluginа такжеUglifyJsPlugin
Теперь мы напрямую используемnpx webpackПросто скомпилируйте.
6. Просмотрите страницу в браузере
Спустя столько времени я все еще не могу просмотреть страницу в браузере, что явно невыносимо!
Просмотрите страницу, это неизбежно нужноhtmlфайл, некоторые друзья могут знать, иногда мы будем указывать файл пакета сhashЗатем каждый раз сгенерированныйjsИмя файла будет другим, мы не можем позволить нам вручную изменять его каждый разhtml, разве это не делает нас глупыми~
мы можем использоватьhtml-webpack-pluginПлагины, чтобы помочь нам сделать эти вещи.
Сначала установите плагин:
npm install html-webpack-plugin -D
новыйpublicдиректорию и создать в ней новуюindex.htmlфайл (использование содержимого файлаhtml:5Можно быстро сгенерировать)
Исправлятьwebpack.config.jsдокумент.
//首先引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//...
plugins: [
//数组 放着所有的webpack插件
new HtmlWebpackPlugin({
template: './public/index.html',
filename: 'index.html', //打包后的文件名
minify: {
removeAttributeQuotes: false, //是否删除属性的双引号
collapseWhitespace: false, //是否折叠空白
},
// hash: true //是否加上hash，默认是 false
})
]
}
выполнить в это времяnpx webpack, можно увидетьdistдобавлено в каталогindex.htmlФайл, который автоматически вставляется и<script>Скрипт, вводится js файл после того как мы его упаковали.
Вот еще немного, чтобы сказать,HtmlWebpackPluginтакже предоставляет намconfigМожно сказать, что эта конфигурация очень полезна.
Магия конфига html-webpack-plugin
Иногда наши строительные леса используются не только нами, но и другими предприятиями.htmlКонфигурируемость файла может иметь важное значение, например: В вашей компании есть специальный отдел для предоставления общедоступной заголовочной части / общей хвостовой части M-страницы, встраивания JSSDK, общего JSSDK и т. д., но не каждому бизнесу нужен этот контент.
Функция может соответствовать несколькимjsилиcssфайл, если он изменяется бизнесом каждый разpublic/index.htmlДокументы тоже громоздкие. Прежде всего, они должны определить файлы, которые должна представлять каждая функция, а затем они могутindex.htmlмодифицировать.
На этом этапе мы можем добавить файл конфигурации, и бизнес может быть установлен с помощьюtrueилиfalseЧтобы выбрать нужные вам функции, мы сгенерируем соответствующие функции для каждого бизнеса в соответствии с содержимым конфигурационного файла.htmlДокументы красивые.
Let's Go!
Во-первых, мыpublicДобавить новый в каталогconfig.js(назовите файл как хотите), установите его содержимое на:
//public/config.js 除了以下的配置之外，这里面还可以有许多其他配置，例如,pulicPath 的路径等等
module.exports = {
dev: {
template: {
title: '你好',
header: false,
footer: false
}
},
build: {
template: {
title: '你好才怪',
header: true,
footer: false
}
}
}
Теперь давайте изменим нашwebpack.config.js:
//webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const isDev = process.env.NODE_ENV === 'development';
const config = require('./public/config')[isDev ? 'dev' : 'build'];
modue.exports = {
//...
mode: isDev ? 'development' : 'production'
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
filename: 'index.html', //打包后的文件名
config: config.template
})
]
}
Соответственно, нам нужно изменить нашpublic/index.htmlФайл (встроенных js и css не существует, просто для иллюстрации):
<!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">
<% if(htmlWebpackPlugin.options.config.header) { %>
<link rel="stylesheet" type="text/css" href="//common/css/header.css">
<% } %>
<title><%= (htmlWebpackPlugin.options.config.title) %></title>
</head>
<body>
</body>
<% if(htmlWebpackPlugin.options.config.header) { %>
<script src="//common/header.min.js" type="text/javascript"></script>
<% } %>
</html>
process.envПо умолчанию нетNODE_ENV, настроить нашpackage.jsonизscripts.
Чтобы быть совместимым с Windows и Mac, давайте сначала установим егоcross-env:
npm install cross-env -D
{
"scripts": {
"dev": "cross-env NODE_ENV=development webpack",
"build": "cross-env NODE_ENV=production webpack"
}
}
Затем мы бежимnpm run devи бегиnpm run build, сравниватьdist/index.html, можно увидетьnpm run build,Созданоindex.htmlВ файле представлены соответствующиеcssа такжеjs. и соответствующийtitleСодержание также отличается.
Вы говорите, что это должно быть использовано здесь?NODE_ENVсудить? Конечно нет, вы пишитеaaa=1,aaa=2все (конечно,webpack.config.jsа такжеscriptsдолжны быть соответствующим образом изменены), но могут быть убиты теми, кто вступит во владение.
БолееHTML-WebPack-Plugin Configuration элемент
Как отобразить эффект в реальном времени в браузере
Сказав так много, я не смог просмотреть эффект в реальном времени в браузере. Вы немного беспокоитесь? Давайте посмотрим, как просмотреть эффект в реальном времени, иначе я не знаю, смогу ли я сопоставьте это правильно.
Без лишних слов сначала установите зависимости:
npm install webpack-dev-server -D
изменить нашpackage.jsonдокументscripts:
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server",
"build": "cross-env NODE_ENV=production webpack"
},
Выполнить на консолиnpm run dev, запуск нормальный, а на странице ничего нет. Измените наш JS-код, добавьте некоторый контент на страницу и обновите ее в обычном режиме (то есть ее можно использовать без какой-либо настройки).
Прошу прощения. Это моя винаcontentBase, Получается, что нет необходимости в сопоставлении, с сомнениями, я снова пошел искать.
Он был настроенhtml-webpack-pluginна случай, если,contentBaseЭто не сработает, а это значит, что я уже был белым соперником, а это грустная история.
Но тогда мы можемwebpack.config.jsв ходе выполненияwebpack-dev-serverДругие настройки, такие как указание номера порта, настройка сообщения консоли браузера, необходимость сжатия и т. д.:
//webpack.config.js
module.exports = {
//...
devServer: {
port: '3000', //默认是8080
quiet: false, //默认不启用
inline: true, //默认开启 inline 模式，如果设置为false,开启 iframe 模式
stats: "errors-only", //终端仅打印 error
overlay: false, //默认不启用
clientLogLevel: "silent", //日志等级
compress: true //是否启用 gzip 压缩
}
}
- включить
quiet, на консоль не будет выведено ничего, кроме исходной информации о запуске. Это также означает, что изwebpackОшибки или предупреждения не видны в консоли ------ Я бы не стал это включать, посмотреть журнал ошибок и сделать молоток -
stats: "только ошибки", печатать только в терминалеerror, обратите внимание, что при включенииquietилиnoInfo, это свойство не действует. ————— Это свойство лично очень полезно, особенно когда мы его включаемeslintили использоватьTSПри разработке слишком много информации о компиляции находится в терминале, что будет нам мешать. - включить
overlayВпоследствии, при возникновении ошибки компиляции, ошибка будет выводиться в полноэкранном режиме окна браузера, который по умолчанию отключен.
-
clientLogLevel: при использовании встроенного режима сообщения будут отображаться в консоли браузера, например, перед перезагрузкой, перед ошибкой или при включенной горячей замене модуля. Если вам не нравится видеть эту информацию, вы можете установить ее наsilent(noneскоро уберут).
Эта статья не предназначена для уточненияwebpack-dev-serverконфигурация, так что я не буду много говорить здесь. оwebpack-dev-serverДополнительные конфигурации могут бытьНажмите, чтобы просмотреть.
Осторожные друзья, возможно, обнаружили небольшую проблему, мы находимся вsrc/index.jsдобавить предложениеconsole.log('aaa'):
class Animal {
constructor(name) {
this.name = name;
}
getName() {
return this.name;
}
}
const dog = new Animal('dog');
console.log('aaa');
затем пройтиnpm run devПроверьте эффект, вы найдете:
Это явно не соответствующий номер строки в нашем исходном коде.Если вы нажмете на нее, вы обнаружите, что код был скомпилирован.Мой текущий код очень простой, и видно, что после усложнения кода проекта он "маме" будет трудно его прочитать и скомпилировать. , это не способствует нашей разработке и отладке, не то, что мы хотим, мы определенно все еще надеемся, что сможем напрямую соответствовать исходному коду.
7.devtool
devtoolВ , есть некоторые настройки, которые могут помочь нам сопоставить скомпилированный код с исходным исходным кодом. Различные значения могут существенно повлиять на скорость сборки и пересборки.
Для меня достаточно иметь возможность найти строку исходного кода, поэтому комплексную скорость сборки, в режиме разработки, я поставилdevtoolЗначениеcheap-module-eval-source-map.
//webpack.config.js
module.exports = {
devtool: 'cheap-module-eval-source-map' //开发环境下使用
}
Производственная среда может использоватьnoneилиsource-map,использоватьsource-mapв конечном итоге будет упакован отдельно.mapфайл, мы можем использовать сообщение об ошибке, и этоmapфайл, проанализируйте ошибку и найдите исходный код.
source-mapа такжеhidden-source-mapбудет упакован для создания отдельного.mapфайл, разница в том,source-mapВ упакованный файл js будет добавлен справочный комментарий, чтобы средства разработки знали, где его найти.hidden-source-mapНикакие справочные комментарии не будут добавлены к упакованному js.
Однако мы, как правило, напрямую не.mapФайл развертывается в CDN, потому что он будет напрямую сопоставлен с исходным кодом, желательно.mapФайл отправляется в систему анализа ошибок, а затем на основе сообщенной информации об ошибке, она напрямую анализируется на расположение исходного кода ошибки.
Вы также можете установить другиезначение инструмента разработки, вы можете использовать разные значения для построения различий контраста.
Теперь мы сказалиhtml,js, и вы также можете увидеть эффект в реальном времени в браузере.Теперь я должен сказать, что один из трех гигантов разработки страницcss.
8. Как быть с этим файлом стилей
webpackне может быть обработано напрямуюcss, требуется помощьloader. если.css, нам нужноloaderОбычно бывают:style-loader,css-loader, учитывая вопросы совместимости, также необходимоpostcss-loader, и еслиlessилиsassЕсли тебе нужноless-loaderа такжеsass-loader, настройте его здесьlessа такжеcssдокумент(sass, использоватьsass-loaderтолько что):
Сначала установите зависимости, которые вам нужно использовать:
npm install style-loader less-loader css-loader postcss-loader autoprefixer less -D
//webpack.config.js
module.exports = {
//...
module: {
rules: [
{
test: /\.(le|c)ss$/,
use: ['style-loader', 'css-loader', {
loader: 'postcss-loader',
options: {
plugins: function () {
return [
require('autoprefixer')({
"overrideBrowserslist": [
">0.25%",
"not dead"
]
})
]
}
}
}, 'less-loader'],
exclude: /node_modules/
}
]
}
}
Протестируй, создай новыйlessдокумент,src/index.less:
//src/index.less
@color: red;
body{
background: @color;
transition: all 2s;
}
Затем импортируйте это в файл вводаless:
//src/index.js
import './index.less';
Мы изменили файл конфигурации и перезапустили службу:npm run dev. Вы можете видеть, что цвет фона страницы изменился на красный.
Хорошо, давайте кратко поговорим о приведенной выше конфигурации:
-
style-loaderдинамически созданныйstyleлейбл, будетcssвставить вheadсередина. -
css-loaderответственный за обработку@importИ другие заявления. -
postcss-loaderа такжеautoprefixer, Автоматически генерировать префиксы совместимости браузеров - 2020, никто не должен писать префиксы браузеров самостоятельно -
less-loaderОтвечает за обработку компиляции.lessфайл, преобразовать его вcss
Здесь между намиwebpack.config.jsнаписалautoprefixerТребуется совместимый браузер только для презентационных целей. Рекомендуется создавать в корневом каталоге.browserslistrc, пропишите в этом файле соответствующие правила, кромеautoprefixerиспользовать снаружи,@babel/preset-env,stylelint,eslint-plugin-conmpatможно поделиться.
Уведомление:
loaderПорядок выполнения выполняется справа налево, то есть последнийloaderВыполнить сначала, вышеloaderПорядок выполнения такой:less-loader ---> postcss-loader ---> css-loader ---> style-loader
Конечно,loaderНа самом деле есть еще один параметр, вы можете изменить приоритет,enforceпараметр, значение которого может быть:pre(приоритет) илиpost(отставание в исполнении).
Теперь мы можем справиться.lessфайл,.cssВ файле нужно только изменить правила сопоставления, удалитьless-loaderВот и все.
Теперь все выглядит идеально, но допустим, мы используем локальное изображение в нашем файле, например:
body{
background: url('../images/thor.png');
}
Вы обнаружите, что сообщается об ошибке, так что же нам делать с изображениями или некоторыми другими файлами локальных ресурсов? Не думай об этом, он тебе обязательно понадобится сноваloaderвне.
9. Обработка файла изображения/шрифта
мы можем использоватьurl-loaderилиfile-loaderдля обработки локальных файлов ресурсов.url-loaderа такжеfile-loaderфункция похожа, ноurl-loaderВы можете указать, что когда размер файла меньше указанного предела, возвращатьDataURLСледовательно, люди предпочли использоватьurl-loader.
Сначала установите зависимости:
npm install url-loader -D
Установитьurl-loaderКогда консоль предложит вам, вам также необходимо установитьfile-loader, слушайте другие и устанавливайте его (новая версияnpmне будет устанавливаться автоматическиpeerDependencies):
npm install file-loader -D
существуетwebpack.config.jsнастроить в:
//webpack.config.js
module.exports = {
//...
modules: {
rules: [
{
test: /\.(png|jpg|gif|jpeg|webp|svg|eot|ttf|woff|woff2)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10240, //10K
esModule: false
}
}
],
exclude: /node_modules/
}
]
}
}
установить здесьlimitимеет размер значения 10240, т.е. размер ресурса меньше10K, преобразовать ресурс вbase64, более 10 КБ, скопируйте изображение вdistсодержание.esModuleУстановить какfalse,иначе,<img src={require('XXX.jpg')} />Будет появляться<img src=[Module Object] />
Преобразовать ресурс вbase64может уменьшить количество сетевых запросов, ноbase64Данные больше, если слишком много ресурсовbase64, приведет к замедлению загрузки, поэтому установитеlimitзначение, необходимо учитывать и то, и другое.
По умолчанию имя файла сгенерированного файла является содержимым файла.MD5Хэш-значение сохранит исходное расширение указанного ресурса.Например, имя файла, соответствующее моему изображению выше (thor.jpeg), выглядит следующим образом:
Конечно, вы также можетеoptionsпараметры изменены.
//....
use: [
{
loader: 'url-loader',
options: {
limit: 10240, //10K
esModule: false,
name: '[name]_[hash:6].[ext]'
}
}
]
Перекомпилируйте, проверьте элемент в браузере, вы можете увидеть, что имя изображения стало таким:thor_a5f7c0.jpeg.
Когда локальных ресурсов много, иногда хочется, чтобы они были упакованы в папку, что тоже очень просто, нужно толькоurl-loaderизoptionsуказано вoutpath,Такие как:outputPath: 'assets', созданный каталог выглядит следующим образом:
болееurl-loaderконфигурация можетПроверить
здесь, немногохорошее времячувство.
Но это еще не конец, если выpublic/index.htmlВ файле используем локальный образ, например, изменим егоpublic/index.html:
<img src="./a.jpg" />
Перезапустите локальную службу, хотя консоль не сообщит об ошибке, но вы обнаружите, что эта картинка вообще не может загрузиться в браузере, почему? Потому что после сборки картинку вообще нельзя найти по относительному пути.
Как? Как это решить?
10. Обработка локальных изображений в html
Установитьhtml-withimg-loaderчтобы решить это.
npm install html-withimg-loader -D
Исправлятьwebpack.config.js:
module.exports = {
//...
module: {
rules: [
{
test: /.html$/,
use: 'html-withimg-loader'
}
]
}
}
тогда в нашемhtmlВведите файл для проверки (адрес картинки написан вами, здесь просто указание):
<!-- index.html -->
<img src="./thor.jpeg" />
Перезапустите локальную службу, изображение не загружается, если вы осмотрите элемент, вы обнаружите, что адрес изображения показывает{"default":"assets/thor_a5f7c0.jpeg"}.
я в настоящее времяfile-loaderВерсия 5.0.2, после версии 5 нужно повышатьesModuleАтрибуты:
//webpack.config.js
module.exports = {
//...
modules: {
rules: [
{
test: /\.(png|jpg|gif|jpeg|webp|svg|eot|ttf|woff|woff2)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10240, //10K
esModule: false
}
}
]
}
]
}
}
Затем перезапустите локальную службу, и все готово.
использование словhtml-withimg-loaderПосле обработки изображенияhtmlнельзя использовать вvm, ejsшаблон, если вы хотите продолжить вhtmlиспользуется в<% if(htmlWebpackPlugin.options.config.header) { %>Такой синтаксис, но, надеюсь, использовать локальные образы, можно? Я хочу и рыбу, и медвежьи лапы.Хотя много раз хорошо есть рыбу, но здесь все в порядке.Напишите адрес картинки, как показано ниже, и удалите ее.html-withimg-loaderможно настроить.
<!-- index.html -->
<img src="<%= require('./thor.jpeg') %>" />
Изображение загружается нормально, и<% %>Грамматика также может использоваться как обычно, ху-ху-ху~~~
несмотря на то что,webpackКонфигурация по умолчанию очень полезна, но иногда у нас есть некоторые другие потребности, например, у нас есть более одного файла ввода, что нам делать в это время?
11. Входная конфигурация
Поля записи:entry
//webpack.config.js
module.exports = {
entry: './src/index.js' //webpack的默认配置
}
entryЗначение может быть строкой, массивом или объектом.
О случае строк говорить больше не нужно, то есть запись ведется на основе соответствующего файла.
Когда это массив, это означает, что есть «несколько основных записей».Если вы хотите внедрить несколько файлов зависимостей вместе, вы настроите его следующим образом. Например:
entry: [
'./src/polyfills.js',
'./src/index.js'
]
polyfills.jsФайл может просто представить некоторыеpolyfill,Напримерbabel-polyfill,whatwg-fetchи т. д., его нужно импортировать спереди (я так настроил в webpack2).
Когда это объект? Не торопитесь, я расскажу об этом позже при настройке нескольких страниц.
12. Экспорт конфигурации
настроитьoutputварианты управленияwebpackКак выводить скомпилированные файлы.
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'), //必须是绝对路径
filename: 'bundle.js',
publicPath: '/' //通常是CDN地址
}
}
Например, ваш окончательный скомпилированный код развернут в CDN, а адрес ресурса: 'https://AAA/BBB/YourProject/XXX', то произведенныйpublicPathНастроен как://AAA/BBB/.
При компиляции его можно не настраивать, или настраивать как/. можно упомянуть передconfig.jsуказано вpublicPath(config.jsдифференцированный вdevа такжеpublic), конечно, вы также можете различать разные среды и указывать файлы конфигурации для установки или в соответствии сisDevполе для установки.
Кроме того, учитывая проблему кэширования CDN, мы обычно добавляем имя файлаhash.
//webpack.config.js
module.exports = {
output: {
path: path.resolve(__dirname, 'dist'), //必须是绝对路径
filename: 'bundle.[hash].js',
publicPath: '/' //通常是CDN地址
}
}
если ты чувствуешьhashЕсли строка слишком длинная, вы также можете указать длину, напримерbundle.[hash:6].js. использоватьnpm run buildПроверьте это.
Возникла проблема, каждый раз при изменении файла происходит его переупаковка, в результате чегоdistФайлов в каталоге становится все больше. Было бы неплохо очищать каталог перед каждым пакетом. Можно ли это сделать? Должен уметь!
13. Очищайте каталог dist перед каждой упаковкой
Да и вообще мне лень чистить вручную.Пока ты достаточно ленив,всегда найдёшь хороший способ.Ленивые люди способствуют техническому прогрессу. Здесь нам понадобится плагин:clean-webpack-plugin
Зависимости установки:
npm install clean-webpack-plugin -D
до,clean-webpack-pluginОн экспортируется по умолчанию, а не сейчас, поэтому нужно быть внимательным при цитировании. Кроме того, параметр, который принимает конструктор, теперь является объектом, для которого можно использовать значение по умолчанию.
//webpack.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
//...
plugins: [
//不需要传参数喔，它可以找到 outputPath
new CleanWebpackPlugin()
]
}
Теперь вы изменяете файл и воспроизводите сборку, сгенерированное значение хэша отличается от предыдущего dist, но потому что каждый разclean-webpack-pluginпоможет нам очистить волну в первую очередь.distкаталог, поэтому файлов не будет слишком много, и глупо различать, какой из них является вновь созданным файлом.
Я надеюсь, что папка в Dist Directory не будет опустошена
Однако иногда мы не хотим, чтобы всеdistКаталоги все пустые, например, мы не хотим удалять их каждый раз при упаковкеdllкаталог иdllКак насчет файлов или подкаталогов в каталоге?
clean-webpack-pluginдает нам параметрыcleanOnceBeforeBuildPatterns.
//webpack.config.js
module.exports = {
//...
plugins: [
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns:['**/*', '!dll', '!dll/**'] //不删除dll目录下的文件
})
]
}
также,clean-webpack-pluginЕсть и другие настройки, но я ими мало пользуюсь, можете посмотретьclean-webpack-plugin
На данный момент мы завершили базовую настройку. Но это не идеально, или иногда у нас будут другие потребности. Далее О насwebpackВ статье о конфигурации будут рассмотрены некоторые другие случаи.
использованная литература
наконец
Если эта статья была вам полезна, поставьте лайк ей.
Не можешь посмотреть?
Подробно разблокируйте серию Webpack (дополнительно) Позвольте вам подробно разблокировать серию Webpack (оптимизация)
Обратите внимание на мой публичный номер
Добро пожаловать в группу технического обмена, пожалуйста, не добавляйте милую рекламу.