Вывод: настройка параметра вывода может управлять тем, как веб-пакет записывает скомпилированные файлы на жесткий диск. Обратите внимание: хотя может существовать несколько точек входа , указывается только одна выходная конфигурация .
Сначала мы инициализируем проект npm init , устанавливаем webpack и webpack-cli локально, затем создаем папки index.html , webpack.config.js и src в корневом каталоге и создаем в этой папке файл main.js в качестве входного файла.
После завершения подготовительных работ получается так, как показано на рисунке:
main.js
Компонент(){
вар div=document.createElement('div')
div.innerHTML="Давайте вместе изучим настройку экспорта~"
вернуть div
}
document.body.appendChild(Component()) index.html
<body>
<script src="./dist/bundle.js"></script>
</body> package.json
"скрипты": {
"test": "echo "Ошибка: тест не указан" && выход 1",
"build":"webpack" //Добавить }, затем часть конфигурации webpack.config.js
Настройка параметра output позволяет контролировать, как веб-пакет записывает скомпилированные файлы на жесткий диск.
Обратите внимание, что даже если может быть несколько точек入口, указывается только одна输出конфигурация.
Ниже приведены несколько концепций выходной конфигурации:
1.
Путь указывает расположение выходных данных ресурса, а требуемое значение должно быть абсолютным путем , например: :
const path=require('путь')
модуль.exports={
запись:'./src/main.js',
выход:{
имя файла: 'bundle.js',
//Установим в качестве места вывода ресурса путь к каталогу dist проекта: path.resolve(__dirname, 'dist')
},
} После Webpack 4 по умолчанию выходным путем является каталог dist . Если нам не нужно его изменить, нет необходимости настраивать его отдельно, поэтому, если это webpack4 или выше, вы можете написать:
Module.exports={
запись:'./src/main.js',
выход:{
имя файла: 'bundle.js',
},
} 2. имя_файла
Функция имени_файла заключается в управлении именем файла выходного ресурса , которое имеет форму строки. Здесь я называю его bundle.js , что означает, что я хочу, чтобы ресурсы выводились в файл с именем Bundle.js:
Module.exports={
запись:'./src/main.js',
выход:{
имя файла: 'bundle.js',
},
} После упаковки, как показано на рисунке, автоматически будет создана папка dist с файлом bundle.js в ней.
имя файла может быть не только именем пакета, но и относительным путем.
Не имеет значения, если каталог в пути не существует. Webpack создаст каталог при выводе ресурсов, например:
модуль.exports = {.
выход: {
имя файла: './js/bundle.js',
},
} Как показано на рисунке после упаковки:
В сценарии с несколькими входами нам необходимо указать отдельное имя для каждого сгенерированного пакета. Webpack поддерживает использование формы, похожей на язык шаблонов, для динамического создания имен файлов .
Перед этим мы создаем новый файл записи в src
:
функция Компонент(){
вар div=document.createElement('div')
div.innerHTML="Я второй файл записи"
вернуть div
}
document.body.appendChild(Component()) webpack.config.js:
модуль.exports = {
вход:{
основной:'./src/main.js',
продавец:'./src/vender.js'
},
выход: {
имя файла: '[имя].js',
},
} Как показано на рисунке после упаковки:
[name] в имени файла будет заменено именем чанка, а именно основным и поставщиком. Таким образом, в конце будут сгенерированы vendor.js и main.js
Если вы хотите просмотреть содержимое, вам необходимо изменить содержимое в index.html и сопоставить путь к последнему упакованному пакету
<body>.
<script src="./dist/main.js"></script>
<script src="./dist/vender.js"></script>
</body> [Вопрос] На данный момент возникнет необходимость. Как мы можем заставить
index.htmlавтоматически добавлять сгенерированный пакет в html? Здесь можно использовать плагин HtmlWebpackPlugin. Подробности см. ниже.
3.
Помимо [name] , который может ссылаться на имя чанка, существует несколько других переменных шаблона, которые можно использовать в конфигурации имени файла:
Они могут: управлять кэшем клиента
. [hash] и [chunkhash] напрямую связаны с содержимым чанка. Если оно используется в имени файла, то при изменении содержимого чанка это также может привести к изменению имени файла ресурса, поэтому. что пользователь немедленно загрузит новую версию при следующем запросе файла ресурса без использования локального кеша.
[query] также может иметь аналогичный эффект, но он не имеет ничего общего с содержимым чанка и должен быть указан разработчиком вручную.
4. publicPath
publicPath — очень важный элемент конфигурации, используемый для указания местоположения ресурсов при
загрузке. В качестве примера
импортируйте Img из './img.jpg';
функциональный компонент() {
//...
вар img = новое изображение ();
myyebo.src = Img // URL-адрес запроса
//...
} {
//...
запрос: {
имя: '[имя].[расширение]',
выходной путь: 'static/img/',
publicPath: './dist/static/img/'
}
} Как показано в приведенном выше примере, исходный адрес запроса изображения — ./img.jpg , но после добавления publicPath в конфигурацию фактический путь становится ./dist/static/img/img.jpg , поэтому изображения можно получить из упакованные ресурсы.
Существует 3 формы publicPath:
Связанные с HTML.
Мы можем указать publicPath в качестве относительного пути HTML. При запросе этих ресурсов путь к HTML-файлу текущей страницы будет добавлен к относительному пути для формирования фактического URL-адреса.
//Предположим, что текущий HTML-адрес: https://www.example.com/app/index.html. //Ресурс, загружаемый асинхронно, называется 1.chunk.js publicPath:"" //-->https://www.example.com/app/1.chunk.js pubilicPath:"./js" //-->https://www.example.com/app/js/1.chunk.js publicPath:"../assets/" //-->https://www.example.com/assets/1.chunk.js
Связано с хостом
Если значение publicPath начинается с "/", это означает, что publicPath по адресу на этот раз начинается с Имя хоста текущей страницы — это базовый путь
// Предположим, что текущий HTML-адрес: https://www.example.com/app/index.html //Ресурс, загружаемый асинхронно, называется 1.chunk.js publicPath:"/" //-->https://www.example.com/1.chunk.js pubilicPath:"/js/" //-->https://www.example.com/js/1.chunk.js,
связанный с CDN
. Два вышеуказанных пути являются относительными. Мы также можем использовать абсолютный путь для настройки publicPath
. Обычно ситуация возникает, когда статические ресурсы размещаются в CDN. Поскольку его доменное имя не соответствует имени домена текущей страницы, его необходимо указать в виде абсолютного пути.
При запуске publicPath в виде заголовка протокола или относительного. протокол, это означает, что текущий путь связан с CDN
. //Предположим, что текущий html-адрес: https://www.example.com/app/index.html. //Ресурс, загружаемый асинхронно, называется 1.chunk.js publicPath:"http://cdn.com/" //-->http://cdn.com/1.chunk.js publicPath:"https://cdn.com/" //-->https://cdn.com/1.chunk.js pubilicPath:"//cdn.com/assets" //-->//cdn.com/assets/1.chunk.js
1. Единый вход
Минимальное требование для настройки output атрибута в веб-пакете — установить его значение для объекта, включая следующие два момента:
filename — это имя выходного файла.path к целевому выходному каталогуmod.exports={
запись:'./src/main.js',
выход:{
имя файла: 'bundle.js',
},
}
//После версии webpack 4 dist будет генерироваться по умолчанию, поэтому путь здесь опущен. 2.
Если конфигурация создает несколько отдельных «кусков», вам следует использовать заполнители, чтобы каждый файл имел уникальное имя
. здесь используется [name] указанного имени файла.
Кроме того, если вы хотите поместить эти ресурсы в указанную папку, вы можете добавить конфигурацию path
mod.exports={.
вход: {
основной: './src/main.js',
продавец: './src/vender.js'
},
выход: {
имя файла: '[имя].js',
путь: __dirname + '/dist/assets' //Укажите, что упакованный пакет помещен в каталог /dist/assets}
}
// Генерируем после упаковки: ./dist/assets/main.js, ./dist/assets/vender.js Остальные проблемы, описанные выше в этой главе, можно решить с помощью плагина HtmlWebpackPlugin
Установите плагин
npm install --save-dev html-webpack-plugin
настройте плагин
const HtmlWebpackPlugin=require('html-webpack-plugin') //Загрузить модуль Module.exports = {
вход:{
основной:'./src/main.js',
продавец:'./src/vender.js'
},
//Добавляем плагины плагины:[
новый HtmlWebpackPlugin({
title:'управление выводом'
})
],
выход: {
имя файла: '[имя].js',
},
}; После завершения упаковки
вы обнаружите, что в dist появляется новый index.html , который автоматически добавляет нам сгенерированные ресурсы. После открытия вы обнаружите, что браузер отобразит содержимое.
Это означает, что вам не нужно будет писать index.html при инициализации проекта в будущем.
Исходный код можно получить здесь:
https://sanhuamao1.coding.net/public/webpack-test/webpack-test/git/. файлы