предисловие
Обычно при разработке работы мы обычно напрямую используем скаффолдинг Vue-cli для создания среды разработки Vue для повышения эффективности.Действительно, этот инструмент экономит нам много времени, но задумывались ли вы когда-нибудь о том, как строится среда разработки Vue? А если сам построишь, сможешь ли гладко построить?
Основываясь на этих идеях, я возился с webpack4 и запустил этот небольшой проект.Я чувствую, что небольшой проект все еще довольно большой, поэтому я написал статью и поделился своим опытом, ха-ха! !
Основываясь на проблемах с личным временем и энергией, это учебное пособие по проекту разделено на две части:
- webpack4 вручную создает среду разработки Vue(эта статья)
- Вручную создайте папку проекта Vue для реализации todoList(включая семейный сегмент Vue)
Надеюсь, вы сможете закончить туториал и получить то, что хотите, хи-хи, что ж, начнем! !
1. Создайте среду выполнения веб-пакета
Ввиду длины статьи в этом руководстве не будут подробно описываться знания о webpack 4. Если у вас есть какие-либо сомнения относительно этапов построения или у вас есть знания, которые вы не можете понять, вы можете сначала выполнить поиск в Google. .Скажу вам тихо, что у webpack4 еще есть много ям, но так называемый прогресс заключается в том, чтобы постоянно наступать на ямы (прикрывать лицо и выражение лица)! !
Инициализировать проект
запустить в командной строкеnpm init -yИнициальный проект, производствоpackage.jsonдокумент
Установить зависимости веб-пакета
npm i webpack webpack-cli --save-dev
Базовая конструкция каталога проекта
базовая конфигурация webpack.base.dev.js
Изменить команды сценария
изменениеpackage.jsonв файлеscriptsнастроить
запустить веб-пакет
существуетmain.jsвойти внутрьdocument.write("Hello World")
Настройте в соответствии с картинкой вышеwebpack.base.dev.jsдокумент
запустить в командной строкеnpm run testкоманда, в папке dist будут сгенерированы файлы js
существуетindex.htmlИмпорт, в случае успешного выводаHello WorldТо есть доказать, что среда Runtime Webpack успешно настроена ...
2. Начните создавать среду Vue
Среда запуска Vue делится на среду разработки и производственную среду.Различные среды имеют разные требования к реализации функций.Например,производственная среда должна сжимать код, а среда разработки нуждается в sourceMap для облегчения отладки, и эти две среды также имеют общую конфигурацию! !
Далее я потихоньку опишу функции, которые нужно реализовать в разных средах.
Создайте новый файл в сборке
-
webpack.base.conf.jsобщедоступный файл конфигурации -
webpack.dev.conf.jsФайл конфигурации среды разработки -
webpack.prod.conf.jsФайл конфигурации рабочей среды
общедоступный файл конфигурации
webpack.base.conf.jsЭто общедоступный файл конфигурации, который должен реализовать следующие функции:
- обработка шрифтов
- Обработка и оптимизация изображений
- Идентифицировать файлы Vue
- Включите транскодирование Babel для преобразования кода ES6 в ES5.
- обработка музыкальных файлов
- Настройте упакованный HTML-шаблон
- Настроить разрешение модуля разрешения
существуетpackage.jsonвнутри файлаscriptsНастройте команду запуска скрипта:
"test":"webpack --config build/webpack.base.conf.js"
запустить в командной строкеnpm run testготов к запускуwebpack.base.conf.jsконфигурационный файл
Файл конфигурации среды разработки
webpack.dev.conf.jsЭто файл конфигурации среды разработки, в котором основное внимание уделяется эффективности отладки:
- Упакуйте и обработайте файлы css и less, установите sourceMap для облегчения позиционирования и отладки.
-
postcss-loaderдобавить префикс автоматически - Настройте devServer для включения функции горячего обновления.
существуетpackage.jsonвнутри файлаscriptsНастройте команду запуска скрипта:
"dev":"cross-env NODE_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
запустить в командной строкеnpm run devготов к запускуwebpack.dev.conf.jsконфигурационный файл
Файл конфигурации рабочей среды
webpack.prod.conf.jsэто файл конфигурации для производственной среды, ориентированный на минимизированный код и производительность:
- Упаковка css и меньше файлов
-
mini-css-extract-pluginИзвлечь стили в отдельные файлы css -
postcss-loaderдобавить префикс автоматически -
clean-webpack-pluginОчищайте папку dist, создаваемую каждый раз, когда вы упаковываете -
optimize-css-assets-webpack-pluginСжать код файла css -
terser-webpack-pluginСжать код файла JS
существуетpackage.jsonвнутри файлаscriptsНастройте команду запуска скрипта:
"build":"cross-env NODE_ENV=production webpack --config build/webpack.prod.conf.js"
запустить в командной строкеnpm run buildготов к запускуwebpack.prod.conf.jsконфигурационный файл
3. Создайте общедоступную функцию файла конфигурации
Функции, которые необходимо реализовать в трех конфигурационных файлах, перечислены выше. Теперь просто следуйте функциям, чтобы собрать и настроить их. Хорошо, начнем! !
существуетwebpack.base.conf.jsЗапустите функцию общедоступной конфигурации внутри
Настроить обработку шрифтов, картинок, музыкальных функций
Для обработки шрифтов, картинок и музыки необходимо установить соответствующие зависимости
npm i url-loader file-loader --save-dev
Код конфигурации выглядит следующим образом
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, '../src/main.js'),
output: {
filename: 'js/[name].[hash:5].js',
path: path.resolve(__dirname, '../dist'),
publicPath: './'
},
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: [{
loader: 'url-loader',
options: {
limit: 10000,
name: 'img/[name]-[hash:5].[ext]',
}
}
]
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'fonts/[name]-[hash:5].[ext]',
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 4096,
name: 'media/[name]-[hash:5].[ext]',
}
}
]
}
]
},
}
url-loaderа такжеfile-loaderФункции аналогичны, вся обработка изображений, иконок шрифтов и прочих файлов в webpack
Отношения между ними являютсяurl-loaderупакованныйfile-loader,ноurl-loaderне зависит от файлового загрузчика
url-loaderИзображение может быть обработано атрибутом предела.Когда изображение меньше предела (единица измерения: байт), оно преобразуется в base64 и вызывается, когда превышает предел.file-loaderОбработайте изображение.
Код ES6 в ES5
Тут я плюнул немного горечи.Когда я научился использовать babel для настройки кода конвертации ES6, я действительно много думал.После его настройки я долго не мог понять какая связь со многими загрузчиками( Закрывая лицо) Позже я прочитал официальный сайт, понятно только, чтобы отличить его от чужих блогов~~~ Ладно, начнем! !
Сначала установите соответствующий загрузчик
npm i babel-loader @babel/core @babel/polyfill @babel/preset-env core-js@3 --save-dev
-
babel-loaderПоддерживает только преобразование синтаксиса ES6, но не поддерживает недавно добавленный API ES6. -
babel-polyfillМожно добавить новые API ES6, чтобы клиенты могли поддерживать -
babel-preset-envНастраиваемая среда выполнения для совместимости с JS -
babel-coreАнализировать код js в ast, что удобно каждому плагину для анализа синтаксиса соответствующей обработки
см. код конфигурации
Эта конфигурация поддерживает только преобразование синтаксиса ES6 и не поддерживает новые API ES6.
во входном файлеmain.jsдобавить внутрьimport @babel/polyfill
Таким образом, вы можете использовать недавно добавленный API ES6, но вы обнаружите, что упакованный файл JS относительно велик, и есть много API ES6, которые вы не используете, поэтому вам нужно импортировать его по мере необходимости в это время. .
Создать в корневом каталогеbabel.config.jsфайл, задайте в нем конфигурацию
Ну это можно ввести по требованию, что может сильно уменьшить размер запакованного JS файла.Ну наконец-то я разобрался с очками знаний(закрывая лицо)(бедное лицо)~~~
Настройте упакованный файл Vue
Сначала установите зависимости
npm i vue vue-loader vue-template-compiler --save-dev
существуетsrcСоздайте новый файл Vue в папкеApp.vue
существуетmain.jsВведите Vue в файл записи и смонтируйте его на узле.
Хорошо, начните упаковывать конфигурацию файла Vue.
Это хорошо, я чувствую, что код для упаковки Vue и монтирования узлов — это настоящее чувство.
Настроить страницу шаблона html
Установить зависимости
npm i html-webpack-plugin --save-dev
Используйте HTML-Webpack-плагин для создания HTML-страниц и автоматически импортировать упакованные файлы
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname,'../index.html'),
filename: 'index.html'
}),
]
Конкретную конфигурацию см. в документации по npm.
Ууууу, эта лошадь plus.com/package/htm…
Настроить разрешение модуля разрешения
Настройте эффективность извлечения удобного пути псевдонима и расширения файла конфигурации по умолчанию.
resolve: {
extensions: ['.js','.json','.vue'],
alias: {
'@': path.resolve(__dirname,'../src')
}
}
"@":"指向src文件夹"
Итак, публичная часть конфигурационного файла завершена, теперь приступайте к настройке окружения! ! !
запустить в командной строкеnpm run test, который может запускать общедоступные профили
В-четвертых, конфигурация производственной среды
Ладно, начинаем стучать! ! !
существуетwebpack.prod.conf.jsнастроить в файле
определить переменные среды
предоставляется в веб-пакетеDefinePluginПлагины могут легко определять переменные среды
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}),
],
Обработка css и меньше файлов
Для обработки файлов css и less в производственной среде вам необходимо извлечь стиль css в отдельный файл css.
И автоматически добавить префикс, sourceMap
Обработка css и меньше файлов
npm i css-loader less less-loader --save-dev
добавить префикс автоматически
npm i postcss-loader autoprefixer --save-dev
Извлечение стилей css в отдельные файлы css
npm i mini-css-extract-plugin --save-dev
Длина слишком велика, чтобы делать скриншоты, просто перейдите к коду
const webpackConfig = require('./webpack.base.conf');
const merge = require('webpack-merge');
const webpack = require('webpack');
//抽离CSS样式
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = merge(webpackConfig,{
mode: 'production',
devtool: 'cheap-source-map',
module: {
rules: [
{
test: /\.(c|le)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
},
{
loader: 'css-loader'
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
sourceMap: true,
plugins: loader=>[
require('autoprefixer')({
browsers: [
"last 2 versions",
"> 1%"
]
})
]
}
},
{
loader: 'less-loader'
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name]-[hash:5].css',
chunkFilename: 'css/[id]-[hash:5].css',
}),
],
}
чистый пакет создать папку
В процессе упаковки вы обнаружите, что папка dist будет продолжать добавлять файлы после каждой упаковки.Очевидно, что нам нужно разобраться с этим аспектом.
Установить связанные зависимости
npm i clean-webpack-plugin --save-dev
//清理dist
const CleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [
new CleanWebpackPlugin(),
],
Сжать код js и css
Сжать css-код
npm i optimize-css-assets-webpack-plugin --save-dev
Сжать js-код
npm i terser-webpack-plugin --save-dev
Как использовать
optimization: {
minimizer: [
//压缩css
new OptimizeCssAssetsWebpackPlugin({}),
// 压缩JS
new TerserWebpackPlugin({
cache: true,
parallel: true,
sourceMap: true,
}),
//具体更多配置可以查看官网
]
}
запустить в командной строкеnpm run buildМожет запускать файл конфигурации среды разработки
Ну и после разговора о настройке среды разработки перейдем к настройке производственной среды.
Пять, конфигурация среды разработки
существуетwebpack.dev.conf.jsнастроить в файле
Немного устал (закрывает лицо)
определить переменные среды
Как и в производственной среде, первое, что нужно сделать, это определить переменные среды.
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development')
}
}),
Обработка css и меньше файлов
CSS и меньше в среде разработки не нужно извлекать стили, нужно только добавить префикс и sourceMap для облегчения отладки
Установить зависимости
Обработка css и меньше файлов
npm i style-loader css-loader less less-loader --save-dev
добавить префикс автоматически
npm i postcss-loader autoprefixer --save-dev
const webpackConfig = require('./webpack.base.conf.js');
const merge = require('webpack-merge');
const path = require('path');
const webpack = require('webpack');
module.exports = merge(webpackConfig,{
mode: 'development',
// source-map,将编译后的代码映射到原代码，便于报错后定位错误
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.(c|le)ss$/,
use: [
{
loader: 'style-loader',
options: {
sourceMap: true
}
},
{
loader: 'css-loader',
options: {
sourceMap: true,
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
sourceMap: true,
plugins: loader=>[
require('autoprefixer')({
browsers: [
"last 2 versions",
"> 1%"
]
})
]
}
},
{
loader: 'less-loader',
options: {
sourceMap: true
}
}
]
}
]
},
}
настроить devServer
На вебпаке можно включить режим горячего обновления, что значительно ускоряет эффективность открытия.
Установить связанные зависимости
npm i webpack-dev-server --save-dev
код выше
//具体更多配置可以参考官网
devServer: {
contentBase: path.resolve(__dirname,'../dist'),
// hot: true,
port: 9090,
overlay: {
warnings: true,
errors: true
},
publicPath: '/'
}
plugins: [
// 启用模块热替换(HMR)
new webpack.HotModuleReplacementPlugin(),
// 当开启 HMR 的时候使用该插件会显示模块的相对路径，建议用于开发环境。
new webpack.NamedModulesPlugin(),
],
Таким образом, вы можете выполнять отладку онлайн без ручного обновления! ! Уи
Ок, настройка среды разработки также завершена.
Введите в командной строкеnpm run devМожет запускать профили производственной среды
6. Резюме
После настройки всей среды разработки Vue я чувствую, что многому научился, а также имею общее представление о настройке функции webpack4.
Хотя до Vue-cli еще далеко, иногда приятно повозиться с мелочью! !
Ну, на этом эта статья заканчивается.Из-за моего ограниченного уровня, если есть какая-то ошибка, пожалуйста, укажите на нее вовремя и развивайтесь друг с другом, ха-ха! ! Спасибо, ребята (улыбается)
В следующей статье я буду использовать созданную на этот раз среду разработки Vue для написанияtodoListпроект
Я считаю, что todoList не чужд всем, но один и тот же проект можно написать по-разному, поэтому в следующей статье я продолжу вручную собирать папку Vue, чистым почерком, используяvue-router. vuexДля достижения, я считаю, это поможет всем, ну и кончено! !
исходный код на гитхабе:Исходный код этого урока
следующая статьяВручную создайте проект Vue, продолжение следует~~~