предисловие
В прошлом выпуске мы реализовали множество функций, внедрив плагины — извлечение стилей, извлечение общих модулей, сжатие кода и т. д., в этом выпуске начнем рассказывать о настройке сторонних компиляторов и многовходовой оптимизации, которые могут быть использовал.
Основные моменты этого выпуска:конфигурация postcss и .babelrc,Многократная оптимизация извлечения многостраничного кода
Прошлые ссылки:
От создания vue-скаффолдинга до освоения конфигурации веб-пакета (1. Базовая конфигурация)
От создания vue-скаффолдинга до освоения конфигурации веб-пакета (2. Плагины и извлечение)
Небольшое отступление
Эта серия статей является третьей статьей.Джейсон, я обнаружил, что в этой серии статей есть большой недостаток.Статья связана с предыдущими статьями, что может привести к линейной корреляции между точками знаний.Для друзей с базовыми знаниями , Если приходится начинать читать с первого номера, то это относительно недружелюбно.
Поэтому в следующих статьях Джейсон попробует самостоятельные очки знаний и постарается вернуться к применению очков знаний; основное содержание этого вопроса также будет объяснено в начале статьи; конечно же, расширенное использование некоторых плагинов -Ины и загрузчики еще нужно базировать, новичкам я бы порекомендовал начать заново.
использовать postcss
Введение в постCSS
postcss официальный GitHubТакже есть введение на китайском языке.
PostCSS — это инструмент, позволяющий преобразовывать стили с помощью JS-плагинов. Эти плагины могут анализировать ваш CSS, поддерживать CSS-переменные и миксины, компилировать расширенный синтаксис CSS, еще не широко поддерживаемый браузерами, встроенные изображения и многие другие замечательные функции.
Проще говоря, postcss - это конвертер css. С postcss вам может не понадобиться использовать less и sass. Добавляя плагины к postcss, вы можете собрать необходимые вам синтаксические требования и функции (атрибутные переменные, вложенность родитель-потомок, совместимость версий, д.), плагины, обычно используемые в postcss, это cssnext, Autoprefixer, postcss-import. Можно даже использовать компиляторы less или sass на postcss.
Применение
добавить сюдаAutoprefixer(автоматически совместим с браузерами) в качестве примера кратко расскажу о методе настройки postcss, существует несколько методов настройки
- Настройте postcss.config.js или .postcssrc.js с файлом конфигурации
- При использовании пост-загрузчика настройте его через пункт конфигурации options
Для настройки рекомендуется использовать конфигурационный файл, чтобы одну и ту же конфигурацию можно было использовать во всех местах, где вызывается postcss-loader.
! Стоит отметить, что на самом деле в vue-loader по умолчанию включен postcss-loader, поэтому vue-loaderофициальная документацияСуществуют варианты для прямой установки элементов конфигурации postcss.
Так что в проектах с vue-loader собственно и не нужно устанавливать вручнуюnpm install -save-dev postcss-loaderДа, это не проект vue, просто установите его.
Пока vue-style-loader добавлен к загрузчикам css, postcss будет автоматически включен, как показано ниже.
{
test:/\.less$/,
use:[
'vue-style-loader'，
'css-loader',
'less-loader'
]
})
},
{
test:/\.vue$/,
loader:'vue-loader',
options:{
loaders:{
'css': [
'vue-style-loader'，
'css-loader',
],
'less': [
'vue-style-loader'，
'css-loader',
'less-loader'
]
},
//postcss:{}//vue-loader还自带了这一选项，但是建议用配置文件进行配置
}
}
Ввести автопрефиксер:
- Вам необходимо установить плагин autoprefixer:
npm install --save-dev autoprefixer - Создайте новый файл .postcssrc.js в каталоге со следующим содержимым
module.exports = {
"plugins": {
//"postcss-import": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {}
}
}
Объект {}, соответствующий autoprefixer, является элементом конфигурации плагина. При необходимости вы можете обратиться к документации для настройки; плагин postcss-import — это @import, который может ссылаться на локальные файлы, такие как файлы в node_modules.Знакомство с плагином. Так как vue-cli использует postcss-import, давайте воспользуемся и им, не забудьте его установитьnpm install --save-dev postcss-import.
autoprefixer проверит элемент конфигурации browserslist в package.json как диапазон совместимых версий браузера.
//在package.json上添加这一项
"browserslist": [
"> 5%",
"last 2 versions",
"not ie <= 8"
]
Мы просто ввели здесь автопрефиксер без особых настроек.Если вас интересует postcss, вы можете перейти к следующим документам
- гитхаб postcss(Есть ссылки и введение в часто используемые плагины)
- инструкция по настройке postcss-loader(Те же правила конфигурации используются как для конфигурации файла, так и для конфигурации веб-пакета)
- Введение в элементы конфигурации автопрефиксера
- Введение в список браузеров
.babelrc конфигурация
При написании js с использованием синтаксиса es6 мы будем использовать babel-loader для преобразования js-файлов в webpack, а .bablrc — это правила и спецификации конфигурации плагинов, используемые babel при компиляции js.
Создайте файл с именем в корневом каталоге, например, postcss.babelrcфайл (без суффикса .js)
{
"presets": [
["env", {
"modules": false ,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-3"
]
}
Установить зависимости:
npm install --save-dev babel-preset-env babel-preset-stage-0
babel-preset-env, Этот зависимый плагин является плагином для настройки среды компиляции.Если вы напрямую импортируете, а не устанавливаете правила, это фактически то же самое, что и импорт.babel-preset-latestТо же самое, будет включать es2015, es2016, es2017.
'modules':false: Установите правила ссылки на модуль, которые можно установить на"amd" | "umd" | "systemjs" | "commonjs" | false, defaults to "commonjs", Если установлено значение false, используются правила по умолчанию выше es6.
targets.browsers: установить совместимый диапазон браузера
tage-3Зависимость, правила транскодирования для разных этапов предложений синтаксиса ES7 (всего 4 этапа), необязательный
babel-preset-stage-0 babel-preset-stage-1
babel-preset-stage-2 babel-preset-stage-3
разное
Вы также можете добавить плагины для достижения большего количества функций, таких как добавление компиляции JSX. Как официальный пример кода
{
"presets"：["env"]
"plugins": ["transform-react-jsx"],
"ignore": [
"foo.js",
"bar/**/*.js"
]
}
В конце концов, это не учебник по babelrc.Для более продвинутого использования вы можете перейти по следующим ссылкам, чтобы узнать больше.
Связь
Ну, конфигурация веб-пакета, загрузчики, плагины и компиляторы, которые использовались до сих пор во всей серии, были использованы.
С самого начала мы будем улучшать нашу автоматическую конфигурацию сборки в соответствии с требованиями.
Несколько страниц, несколько записей
Многие инженерные среды, использующие vue или react, по умолчанию используют spa (одностраничное приложение), но в отрасли также есть много проектов, которые, как правило, используют функции компонентизации фреймворков, таких как vue, но не вводят модули маршрутизатора, а используют традиционные Маршрутизирующие ссылки или два Смешанные пользователи, особенно веб-страницы на стороне ПК, такие как веб-сайты с видео и веб-сайты с покупками, не будут превращены в курорты. Поэтому редактирование и создание нескольких страниц в проекте является обязательным.
Создайте новый файл home.js в каталоге src (содержимое такое же, как у main.js) Это самый удобный и быстрый способ установить несколько записей в элементе ввода веб-пакета.
entry:{
app:'./src/main.js',
home:'./src/home.js'
},
output:{
path:path.resolve(__dirname,'./dist'),
filename:"js/[name].js",
},
запись соответствует разным страницам, чтобы установить разные файлы ввода, output.filename должен быть записан в форме [имя], названное в честь имени чанка
Это кажется простым, но мы использовали обычное извлечение кода (CommonsChunkPlugin) и извлечение css (ExtractTextPlugin), чтобы упаковать код во всем проекте вместе, что повлияет на загрузку страницы. Так что мы должны улучшить его логику
css разделение страницы
Это легко, просто добавьтеallchunks:trueПараметры достаточны, и вывод указывает на файл css с[name]различать имена чанков
const ExtractVueCss = new ExtractTextPlugin({filename:'styles/[name]-style.css',allChunks:true});
По моей привычке сначала делим публичный стиль (root.css), а остальные делим по количеству чанков, поэтому root.cssallchunks:false,другиеtrue.
const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const ExtractRootCss = new ExtractTextPlugin({filename:'styles/[name]-root.css',allChunks:false});
const ExtractVueCss = new ExtractTextPlugin({filename:'styles/[name]-style.css',allChunks:true});
module.exports = {
//other options...
module:{
rules:[
//...
{
test:/\.css$/,
//这里用的ExtractRootCss,输出到root.css
use:ExtractRootCss.extract({
fallback:'style-loader',
use:['css-loader']
})
},
{
test:/\.less$/,
//这里用的ExtractRootCss,输出到root.css
use:ExtractRootCss.extract({
fallback:'style-loader',
use:[
'css-loader',
'less-loader'
]
})
},
{
test:/\.vue$/,
loader:'vue-loader',
options:{
loaders:{
//这里用的ExtractVueCss
'css': ExtractVueCss.extract({
use: 'css-loader',
fallback: 'vue-style-loader'
}),
//这里用的ExtractVueCss
'less':
ExtractVueCss.extract({
use:[
'css-loader',
'less-loader'
],
fallback:'vue-style-loader'
})
},
}
},
]
},
plugins:[
//填入插件实例,记得按顺序填入
ExtractRootCss,//root.css
ExtractVueCss,//vue内的css
new webpack.HotModuleReplacementPlugin(),
]
}
Многостраничное общедоступное извлечение
не знаюcommons-chunk-plugin, если вы не хотите читать предыдущие статьи, перейдите по ссылке слева
Ранее мы извлекали модули из node_modules в vendor.js.
//抽取从node_modules引入的模块，如vue，vue-router
new webpack.optimize.CommonsChunkPlugin({
name: 'vender',
minChunks:function(module,count){
var sPath = module.resource;
// console.log(sPath,count);
//匹配 node_modules文件目录
return sPath &&
/\.js$/.test(sPath) &&
sPath.indexOf(
path.join(__dirname, 'node_modules')
) === 0
}
}),
Выше указано несколько фрагментов ввода, а для вывода не задано уникальное имя файла, поэтому веб-пакет автоматически сгенерирует соответствующее количество пакетов кода в соответствии с количеством фрагментов входа при упаковке.В соответствии с текущей ситуацией будет приложение .js и home.js.
Но проблема в том, что каждый фрагмент будет упаковывать все модули, которые они используют отдельно. Например, app и home используют один и тот же модуль header.vue, а webpack упаковывает их в app.js и home.js соответственно. Модули, которые используются повторно, лучше всего извлекать многократно.После того, как файл js загружен на главную страницу, он кэшируется, и скорость загрузки страницы можно улучшить сразу на странице сведений.
Чтобы решить вышеуказанные проблемы, мы добавим еще один пример извлечения общего кода.
new webpack.optimize.CommonsChunkPlugin({
name:'common'
minChunks:2
}),
Таким образом, модули, представленные более двух раз на каждой странице (фрагмент входа), будут упакованы в файл common.js.
minChunks:2Это означает, что все модули с более чем 2 повторными использованиями в чанке будут извлечены. Он написан как 2 с наименьшей детализацией, и вы можете изменить его в соответствии со своими потребностями.
(Обновление 5.20) В реальном проекте было обнаружено, что vendor.js не был извлечен, когда была одна запись.Причина может заключаться в том, что общее не было вызвано одной записью заранее (пожалуйста, сообщите мне конкретную причину) , так что мы должны сделать еще одну запись Оценка количества
Object.keys(config.page).length >= 2
? new webpack.optimize.CommonsChunkPlugin({
name: 'common',
minChunks:2
}):()=>{},
Извлеките логику времени выполнения веб-пакета
Ссылаясь на vue-cli, мы будем думать, что логика времени выполнения, такая как планирование загрузки веб-пакета, не будет часто изменяться, поэтому мы будем вызывать ее на будущих страницах после извлечения этой части. В этом случае мы добавляем экземпляр CommonsChunkPlugin для извлечения этой логики.
Object.keys(config.pages).length >= 2 ?
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
minChunks:2
}):()=>{},
new webpack.optimize.CommonsChunkPlugin({
name: 'vender',
minChunks:function(module,count){
var sPath = module.resource;
return sPath &&
/\.js$/.test(sPath) &&
sPath.indexOf(
path.join(__dirname, '../node_modules')
) === 0
}
}),
//将webpack runtime 和一些复用部分抽取出来
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks:Infinity
}),
!Уведомление! Плагины вводятся по порядку, и неправильный порядок может привести к перезаписи операции.
minChunks:InfinityНикакие фрагменты не извлекаются, извлекается только логика, такая как среда выполнения веб-пакета.
Извлечь асинхронные общие модули
При разработке vue или react может использоваться возможность асинхронной загрузки модулей (также называемая ленивой загрузкой), напримерimport()а такжеwebpack require.ensureМодули, которые функционируют асинхронно загружаются. Проект vue обычно vue-routerленивая загрузкаиспользуются компоненты.
Хотя vue-router не обязательно используется при многостраничной разработке, мы делаем конфигурацию сборки более надежной и адаптируем к ситуации spa, а также добавляем извлечение асинхронных публичных модулей.
// 放到上面三个CommonsChunkPlugin的最后
new webpack.optimize.CommonsChunkPlugin({
// names: ["app", "subPageA"]
// (选择 chunks，或者忽略该项设置以选择全部 chunks)
async: 'vendor-async',
children: true,
minChunks:2
}),
Если имя не указано, по умолчанию будут выбраны все фрагменты записей.
async: Можно сделатьtrueИли строку, которая является именем сгенерированного публичного чанка. (Я не понимал эту опцию, пока не увидел эту статьюРазделение кода Webpack Dafa)
children: выбрать все дочерние фрагменты выбранных фрагментов
minChunks: Подмодули, которые больше или равны двум мультиплексированным частям, будут извлечены в общий чанк.
Представлен пример ниже китайского документаlink
Перепишите сгенерированный HTML-шаблон
Аналогично студенты, которым лень читать предыдущую статью и не понимают HtmlWebpackPluginздесь
Плагин HtmlWebpackPlugin использовался в прошлом выпуске, но мы просто настроили файлы шаблонов и файлы экспорта. Плагин по умолчанию импортирует все выходные фрагменты и файлы css в сгенерированный шаблон. Давайте изменим конфигурацию плагина следующим образом
plugins:[
new HtmlWebpackPlugin({
filename:'index.html',
title:'vue demo',
// favicon:'./src/images/logo.png',
template:'./index.html',
chunks:['app','vender','manifest','common'],
chunksSortMode: 'dependency'
}),
new HtmlWebpackPlugin({
filename:'home.html',
title:'vue home',
template:'./index.html',
chunks:['home','vender','manifest','common'],
chunksSortMode: 'dependency'
}),
]
filename: сгенерированное имя файла, отличающее страницу от соответствующего имени
template: исходник шаблона html, это должен быть проект vue, поэтому используйте тот же шаблон, вы можете настроить его в соответствии со своими потребностями.
chunks: Ключ находится здесь. Это параметр, в котором перечислены фрагменты, связанные с этим шаблоном. Я заполнил различные фрагменты ввода и извлеченные общедоступные фрагменты.
chunksSortMode:порядок введения фрагмента,'dependency'Импорт по зависимости
строить
бегатьnpm run build, сгенерированная структура каталогов файла dist выглядит следующим образом
Асинхронный общедоступный модуль vendor-async.js не был создан, поскольку часть асинхронной загрузки еще не использовалась в проекте.
Полный файл webpack.config.js на данный момент можно найти здесь.скачать
ps
Джейсон предложил, чтобы при просмотре конфигурации веб-пакетов других людей, если вы столкнетесь с плагинами, которые вы не понимаете, проверить их.npmjsИли форумы сообщества, загляните, когда у вас будет времяПлагины, официально представленные webpackМожет быть, есть что-то, что вам нужно
Уровень Джейсона ограничен, если есть какие-либо ошибки в очках знаний, пожалуйста, дайте больше очков и дайте мне знать в комментариях.
следующее уведомление
На одном из веб-пакетов после настройки можно справиться со сборкой одностраничного приложения, и в этот период также адаптируется к построению многостраничного спроса, но также изучается postcss и базовая конфигурация babelrc. Разве это не чувство приближения к проекту, созданному vue-cli?
Внедрив идею многостраничного построения, мы обнаружили, что если наши страницы продолжают увеличиваться, нам нужно постоянно добавлять плагины и логику в webpack.config.js. Поэтому для удобства и простоты использования в следующем выпуске мы попробуем написать некоторую логику инкапсуляции для инкапсуляции конфигурации сборки и использовать файл для интеграции часто используемых элементов конфигурации для унифицированной настройки проекта.
Следующий выпуск может быть обновлен не скоро, с одной стороны, мне есть чем заняться, с другой стороны, я еще не упаковывал и не тестировал весь проект (поэтому и не дали гитхаб), так что пожалуйста Учащимся, которые следят за этой серией, возможно, придется подождать, нуждающиеся учащиеся также могут подписаться на мою учетную запись, чтобы следить за обновлениями.
Очередной выпуск обновлен:От построения vue-скаффолдинга до освоения конфигурации веб-пакета (4. Автоматизированная упаковка)
Ссылаться на
GitHub.com/post CSS/сломанный…
Руководство по настройке PostCSS North.md