написать впереди
При использовании Vue для разработки одной страницы мы большую часть времени используем официальный инструмент CLI.Теперь Vue CLI был обновлен до 4.X, можно сказать, что он очень зрелый и стабильный, он может удовлетворить большинство требований и легко начать. В духе метания наощупь я все же планирую сам построить среду разработки и ознакомиться с каждым процессом.
Эта статья не включает в себя объяснение знаний о Webpack и babel.Рекомендуется ознакомиться с базовыми знаниями о Webpack и прочитать эту статью для лучшего понимания. Есть много учебников по этому онлайн. Установка node.js и npm здесь повторяться не буду, я считаю, что front-end разработка — это необходимость для компьютеров.
Если вы столкнулись с неизвестной ошибкой в процессе построения, проверьте сообщение об ошибке и запишите устранение неполадок.Иногда использование связанных плагинов изменится после обновления.Возможно, что вы также сообщите об ошибке, когда будете следовать моей конфигурации, тогда загляните на официальный сайт Документы (обычно проверяйте соответствующие репозитории на github) изменили ли они способ написания, например плагин clean-webpack-plugin я настроил в этот раз, предыдущую версию не нужно было деконструировать , но теперь его надо разобрать, иначе сообщит об ошибке и подскажет, что это не конструктор
Большой парень делает крюк и слегка распыляет. . .
Обновление: если и среда разработки, и производственная среда используют плагины для разделения CSS на отдельные файлы, то вы обнаружите, что горячие обновления не влияют на CSS во время разработки, поэтому решение состоит в том, чтобы разделить CSS и настроить его только в рабочей среде. окружающая обстановка. Зарыл яму для всех, простите!
Вышла глава по оптимизации:Среда разработки мобильных приложений Vue на базе Webpack4 - оптимизация
Мои версии node.js и npm следующие:
node -v
v12.13.0
npm -v
v6.12.0
Начинать
1. Инициализировать проект
Сначала вам нужно создать новую папку, я называю ее здесьcustomized-vue-proj-mobile, затем щелкните правой кнопкой мыши на своей папке, чтобы открыть git bash, и введите следующую команду для инициализации проекта (конечно, git должен быть установлен, cmd также возможен):
npm init
После выполнения этой команды в каталоге будет сгенерирован файлpackage.jsonфайл, содержимое моего файла выглядит следующим образом:
{
"name": "customized-vue-proj-mobile",
"version": "1.0.0",
"description": "customized vue development environment",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/cookiepool/customized-vue-proj-mobile.git"
},
"keywords": [
"vue",
"mobile"
],
"author": "LEE",
"license": "MIT",
"bugs": {
"url": "https://github.com/cookiepool/customized-vue-proj-mobile/issues"
},
"homepage": "https://github.com/cookiepool/customized-vue-proj-mobile#readme"
}
Здесь также много знаний об управлении пакетами npm.
Такой проект сначала инициализируется, а затем начинает входить установка различных инструментов для завершения построения среды.
2. Установите веб-пакет
Если вы основаны на веб-пакете, вы должны сначала установить веб-пакет, прежде чем продолжать установку продолжения, поэтому давайте сначала установим команду:
npm install webpack --save-dev
--save-devУказывает, что информация об установке пакета помещена вpackage.jsonизdevDependenciesВнутри это не будет использоваться в производственной среде,-Dравно--save-dev.--saveУказывает, что информация об установке пакета помещена вpackage.jsonизdependenciesВнутри это будет упаковано для использования в производстве.-Sравно--save.
Затем вам нужно установить CLI.Начиная с webpack4, вы должны установить webpack cli для выполнения команд, связанных с webpack.
npm install webpack-cli -D
Далее введитеnpx webpack --helpЧтобы проверить, доступен ли веб-пакет, если после ввода этой команды на панели появляется большой набор справочной информации по настройке, это означает, что веб-пакет доступен.
npx может напрямую вызывать модули, установленные внутри проекта, без необходимости глобальной установки модулей npm.Если вы не используете npx в приведенной выше команде, вы обнаружите, что система отображает
bash: webpack: command not found.
Теперь создайте новую папку src в каталоге проекта, создайте в ней новый файл main.js и напишите в нем некоторый код js. Затем создайте папку сборки и создайте новый файл конфигурации webpack.config.js. Итак, наша структура каталогов выглядит так:
Файл собран, но контента пока нет, поэтому он точно не запустится.Далее я проделаю некоторые операции над webpack.config.js.Конкретный процесс здесь описывать не буду(#funny life), просто вставлю код , и я написал комментарий внутри:
// build/webpack.config.js
// node.js里面自带的操作路径的模块
const path = require('path');
module.exports = {
// 指定模式，这儿有none production development三个参数可选
// 具体作用请查阅官方文档
mode: 'development',
// webpack打包的入口文件
entry: {
main: path.resolve(__dirname, '../src/main.js')
},
// webpack打包的输出相关的额配置
output: {
// 打包过后的文件的输出的路径
path: path.resolve(__dirname, '../dist'),
// 打包后生成的js文件，带hash值来保证文件的唯一性
filename: 'js/[name].[hash:4].js',
// 生成的chunk文件名
chunkFilename: 'js/[name].[hash:4].js',
// 资源的引用路径（这个跟你打包上线的配置有关系）
publicPath: '/'
}
}
Затем переделайте package.json и добавьте предложение в скриптыdevЭта команда:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack ./src/main.js --config ./build/webpack.config.js"
},
После еды попробуем посмотреть, можно ли использовать эту команду, вводим в консоли:
npm run dev
Через некоторое время появится следующая информация, что означает, что мы успешно запаковали вывод:
Теперь структура проекта выглядит так:
Здесь построена среда, можно только сказать, что конфигурация webpack обычная, и есть много дополнительных вещей, которые необходимо настроить, например, следующие
- babel, это может преобразовать ES6+ в ES5, доступный для слабых браузеров, и полифилл для некоторых новых API.
- Препроцессор CSS, на данный момент есть много вариантов препроцессора CSS, здесь я выбираю для настройки scss, конечно можно и не использовать препроцессор CSS.
- Загрузчик обработки файлов, в основном это обработка связанных с проектом картинок, шрифтов, аудио и видео.
- HTML-файл создается автоматически, а упакованный js-файл необходимо правильно импортировать для нормального использования.
- postcss, этот инструмент в основном работает с css, установка соответствующих плагинов может реализовать некоторые функции, такие как автоматическое добавление префикса css3, px-to-rem или px-to-vw, используемые в мобильной разработке и т. д.
- Функция горячего обновления, которая автоматически реагирует на наши модификации и обновления в процессе разработки без ручного обновления.
- Распознавать файлы .vue, это позволяет веб-пакету распознавать файлы .vue и преобразовывать их в контент, который может использовать браузер.
- Интеграция vue-router и vuex незаменима для одностраничной маршрутизации.Управление состоянием можно вводить по мере необходимости, а не что-то, что нужно настраивать.
3. Настройте связанные инструменты
3.1, от ES6+ до ES5
Сначала идет волна команд установки для установки соответствующих зависимостей:
npm install babel-loader @babel-core @babel/preset-env -D
- babel-loader Это загрузчик для webpack для обработки babel, который используется для вызова основного API @babel/core для завершения компиляции.
- @babel-core Сюда включено ядро Babel, основной API.
- @ Babel/preset-env babel предустановленной среды.
обратитесь к моей статьеУзнать о вавилоне, конечно же, есть много статей, написанных большими парнями в сообществе, вы можете более основательно разобраться, прочитав еще несколько статей.
- Изменить webpack.config.js
Теперь нам нужно настроить webpack для поддержки babel, и здесь нам нужно использовать только что установленный загрузчик babel. Добавьте следующий код в файл конфигурации:
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader'
}
]
}
]
}
- Создайте новый файл babel.config.js в корневом каталоге проекта.
Добавьте в файл следующее:
// babel.config.js
module.exports = {
// 配置预置环境
presets: [
// 使用的规则
"@babel/preset-env"
]
}
После настройки перейдите в main.js, чтобы написать код js с синтаксисом es6+, а затем выполнитеnpm run devВы обнаружите, что синтаксис сгенерированных js-файлов в каталоге dist был преобразован в es5, но обещание не было преобразовано.Нам также нужен полифилл.
- Настройте полифиллы и импортируйте их по мере необходимости.
Введите следующую команду для установки необходимых зависимостей:
npm install core-js@2 -S
После установки перейдите на babel.config.js и измените код следующим образом:
module.exports = {
// 配置预置环境
presets: [
// 使用的规则
["@babel/preset-env", {
// 这儿有false, entry, usage三个可选参数，usage可以按需引入polyfill
"useBuiltIns": "usage",
// 指定corejs版本
"corejs": 2
}]
]
}
Таким образом, ваш js может работать в браузерах более ранних версий, таких как Promise.
3.2, настроить препроцессор css
Или сначала установите зависимости
npm install sass-loader dart-sass css-loader style-loader -D
- style-loader Этот загрузчик в основном разбирает css в тег стиля html.
- css-loader Этот загрузчик используется для парсинга css.Обратите внимание, что при вызове style-loader и css-loader css-loader должен выполняться перед style-loader, иначе будет сообщено об ошибке.При использовании следующего метода записи:
use: [{loader: 'style-loader'}, {loader: 'css-loader'}]
Потому что загрузчик загружается справа налево. (Зачем загружать справа налево) Последовательность компиляции здесь заключается в том, чтобы сначала использовать css-loader для компиляции кода css, а затем передать его style-loader для вставки на веб-страницу. Таким образом, загрузчик css находится справа, а загрузчик стилей — слева.
- sass-loader Этот загрузчик преобразует scss или sass в css.
- Инструмент dart-sass похож на компилятор, он преобразует синтаксис scss и комбинирует его с sass-loader, на самом деле есть еще и node-sass, который можно использовать. Если вы используете node-sass, вам не нужно указывать его в файле конфигурации webpack, вам нужно только установить node-sass с npm, здесь я использую dart-sass, поэтому мне нужно указать его в реализации.
После загрузки и установки зависимостей в файле конфигурацииwebpack.config.jsсерединаmodule->rulesДобавьте внутрь следующий код:
{
test: /\.(scss|sass)$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'sass-loader',
options: {
implementation: require('dart-sass')
}
}
]
}
3.3. Создание HTML-файла и соответствующая обработка
Во-первых, создайте каталог public в каталоге проекта и создайте в нем index.html как единственную запись для одной страницы. код показывает, как показано ниже:
<!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">
<title>customized-vue-proj-mobile</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
В этот момент структура каталогов становится такой, как показано на рисунке.
После того, как файл создан, нам нужен плагин для обработки html-файла. Только когда файл js нормально импортирован в html-файл, наш проект может работать. Введите следующую команду для установкиhtml-webpack-plugin:
npm install html-webpack-plugin -D
После завершения установки добавьте в плагины конфигурационного файла webpack следующий код:
plugins: [
new htmlWebpackPlugin({
// 指定模板
template: path.resolve(__dirname, '../public/index.html'),
// 输出的文件
filename: path.resolve(__dirname, '../dist/index.html')
})
]
3.4 Настроить обработку шрифтов, картинок и других файлов
В процессе разработки вы обязательно встретите много медиафайлов, особенно картинок.В webapck есть специальный загрузчик для обработки этих файлов.Сначала установите зависимости:
npm install url-loader file-loader -D
- url-loader и file-loader, эти два имеют схожие функции.Преимущество url-loader заключается в том, что, когда файл меньше указанного нами размера, он может преобразовать медиафайл в кодировку base64, что может уменьшить запрос изображения проект и повысить скорость доступа.
Затем мы добавляем следующий код в файл конфигурации веб-пакета:
{
test: /\.(jpe?g|png|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
// 当文件大于5kb时走file-loader相关的配置
limit: 5120,
// 这个参数要设置成false,不然生成图片的路径时[object Module]
esModule: false,
// 当文件大于5kb时走file-loader相关的配置
fallback: 'file-loader',
// 生成的路径和文件名
name: 'images/[name].[hash:4].[ext]'
}
}
]
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 5120,
esModule: false,
fallback: 'file-loader',
name: 'media/[name].[hash:4].[ext]'
}
}
]
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 5120,
esModule: false,
fallback: 'file-loader',
name: 'fonts/[name].[hash:4].[ext]'
}
}
]
},
Выше мы настроили обработку, связанную с медиафайлами.
3.5 Разрешить webpack распознавать файлы vue
Установите зависимости:
npm install vue-loader vue-template-compiler -D
- vue-loader необходимо использовать вместе с vue-template-compiler, иначе преобразование не будет завершено.
Сначала настройте содержимое модуля:
{
test: /\.vue$/,
use: [
{
loader: 'vue-loader',
options: {
compilerOptions: {
preserveWhitespace: false
}
}
}
]
}
В конфигурации есть параметр saveWhitespace компилятора Options, который означает, что когда его значение равно true, это означает, что скомпилированная функция рендеринга сохранит пробелы между всеми HTML-тегами. Если установлено значение false, пробелы между тегами игнорируются. Это может немного повысить производительность, но может повлиять на расположение встроенных элементов. Конкретная ссылка здесь:Связь
После настройки модуля нам также необходимо внедрить плагины, это необходимо
// 引入vue-loader插件
const VueLoaderPlugin = require('vue-loader/lib/plugin');
// 添加到plugins中
new VueLoaderPlugin()
Для получения подробной информации вы можете обратиться сюда:Связь
Затем нам также нужно настроить псевдонимы, которые могут уменьшить проблемы со ссылками на слишком длинные пути:
resolve: {
alias: {
// 写了这句，我们可以这样写代码 import Vue from 'vue', 并且引入的是vue/dist/vue.runtime.esm.js这个版本，不然默认引入的是vue.js。这个在github的vue官方仓库dist目录下有解释。
'vue$': 'vue/dist/vue.runtime.esm.js',
// 写了这句，我们可以这样写代码 import api from '@/api/api.js'，省去到处找路径定位到src的麻烦
'@': path.resolve(__dirname, '../src')
},
// 添加一个 resolve.extensions 属性，方便我们引入依赖或者文件的时候可以省略后缀
// 我们在引入文件时可以这样写 import api from '@/api/api'。
extensions: ['*', '.js', '.vue']
},
3.6, настроить postcss
Я настроил в этом месте три плагина, autoprefixer, postcss-pxtorem, postcss-px-to-viewport. Вам нужно настроить только один из последних двух. В основном это зависит от того, используете ли вы rem или vw для разработки, и вы можете выбирайте сами.
npm install postcss-loader autoprefixer postcss-pxtorem postcss-px-to-viewport -D
- postcss-loader отвечает за операции, связанные с postcss.
- autoprefixer добавляет в браузеры различные префиксы css3.
- postcss-pxtorem px автоматически преобразуется в rem.
- postcss-px-to-viewport px автоматически преобразуется в vw|vh.
После установки зависимостей создайте файл в корневом каталоге проектаpostcss.config.js, затем введите в файл следующее:
module.exports = {
plugins: {
// 这个工具可以实现自动添加CSS3前缀
"autoprefixer": {},
// 如果你使用rem来实现移动端多设备适配，这个工具可以把px转换为rem
/* "postcss-pxtorem": {
rootValue: 37.5, // 指定转换倍率，我现在设置这个表示1rem=37.5px;
propList: ['*'], // 属性列表，表示你要把哪些css属性的px转换成rem，这个*表示所有
minPixelValue: 1, // 需要转换的最小值，一般1px像素不转换，以上才转换
unitPrecision: 6, // 转换成rem单位的小数点后的保留位数
selectorBalckList: ['van'], // 匹配不被转换为rem的选择器
replace: true, // 替换包含rem的规则，而不是添加回退
mediaQuery: false // 允许在媒体查询中转换px
}, */
// 如果你使用vw来实现移动端多设备适配，这个工具可以把px转换为vw
"postcss-px-to-viewport": {
unitToConvert: 'px', // 把什么单位转换成vw
viewportWidth: 750, // 这个可以按照你的设计稿来设置，是750就设置750，375就设置成375
unitPrecision: 6, // 转换成vw单位的小数点后的保留位数
propList: ['*'], // 属性列表，表示你要把哪些css属性的px转换成vw，这个*表示所有
viewportUnit: 'vw', // 使用的单位，目前可选单位有vw,vh。一般我们都有vw
fontViewportUnit: 'vw', // 字体使用的单位
selectorBlackList: [], // 匹配不被转换为vw的选择器
minPixelValue: 1, // 需要转换的最小值，一般1px像素不转换，以上才转换
mediaQuery: false, // 允许在媒体查询中转换px
replace: true, // 替换包含vw的规则，而不是添加回退
exclude: [], // 忽略一些文件，比如“node_modules”，可以是正则表达式
landscape: false, // ......
landscapeUnit: 'vw', // ......
landscapeWidth: 568 // ......
}
}
}
Затем конфигурация веб-пакета добавляет:
{
test: /\.(scss|sass)$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'sass-loader',
options: {
implementation: require('dart-sass')
}
},
{
loader: 'postcss-loader'
}
]
}
3.7. Настройка функции горячего обновления
Установите зависимости:
npm install webpack-dev-server -D
После завершения установки выполните следующую настройку:
// 引入webpack
const webpack = require('webpack');
// 配置devServer
devServer: {
// 默认情况不设置这个只能通过localhost:9000来访问，现在可以通过本机局域网ip来访问，
// 比如192.168.12.21:9000，手机在这个局网内也可以访问
host: '0.0.0.0',
hot: true,
port: 9200,
contentBase: './dist'
}
// 配置plugins
new webpack.NamedModulesPlugin(), // 辅助HotModuleReplacementPlugin插件
new webpack.HotModuleReplacementPlugin(), // 启用热更新必须的
4. Определите переменные среды
Это в основном для определения этой вещиprocess.env.NODE_ENV, после определения этого мы обычно можем судить, какой код выполняется в какой среде.Мы знаем, что среда упаковки webpack и конфигурация среды разработки обычно различаются. Например, мы пишем оценку кода в записи main.js следующим образом:
if(process.env.NODE_ENV === 'development'){
//开发环境 do something
}else if(process.env.NODE_ENV === 'production') {
//生产环境 do something
}
Итак, как определить эту среду, во-первых, использовать плагин DefinePlugin для веб-пакетов,
- Использование DefinePlugin Добавляем в плагины следующий код:
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development')
}
}),
Тогда значение process.env.NODE_ENV, к которому мы наконец получаем доступ после упаковки, — это разработка.
Еще одно использование собственной интегрированной среды webpack4, нам нужно только объявить режим в файле конфигурации, рекомендуется использовать это
- Использование параметра режима webpack4
module.exports = {
// 有none production development三个参数可选，不设置mode的话默认的process.env.NODE_ENV值为production
mode: "development",
entry: {}
.....
}
С указанными выше настройками режима мы все еще можем получить значение process.env.NODE_ENV. Для справки есть несколько статей о точке знаний process.env.NODE_ENV:
5. Интегрированное ведро семейства Vue
Установить зависимости
npm install vue vuex vue-router -S
После установки зависимостей создайте новый файл App.vue в каталоге src. Напишите следующий код:
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss">
</style>
Создайте два новых каталога, router и store, в разделе src, а затем создайте в этих каталогах соответственно router.js и store.js. Кстати, создайте другие папки, такие как компоненты, активы и представления. Теперь моя структура каталогов выглядит так:
Код main.js изменен на следующий:
import Vue from "vue";
import App from "./App.vue";
import router from "./router.js";
new Vue({
router,
render: h => h(App)
}).$mount("#app");
После того, как эти файлы собраны, код, лежащий в основе, фактически пишется так же, как и официальные леса.Я не буду демонстрировать здесь, как писать код других файлов.Вы можете обратиться к моему исходному коду на тот момент.
После введения здесь vue-router и vuex можно приступить к тесту, настроив в соответствии с официальной документацией.Я тестировал только нормальные функции vue и vue-router.Vuex пока только создавал файлы, но не проводил собственно вводный тест. Я отправлю исходный код на github для справки позже.
В это время, если мы напрямую запустим npm dev, он будет упакован, поэтому нам нужно изменить dev в скриптах package.json на следующий код:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --config ./build/webpack.config.js"
},
На этом этапе, если вы выполнили предыдущую работу, теоретически вы можете увидеть эффект после выполнения npm run dev здесь Эффект здесь показан на рисунке:
6. Различайте среду разработки и рабочую среду
Все мы знаем, что при одностраничной разработке среда разработки отличается от производственной среды.При использовании официального cli команда разработки обычно npm run dev, а при выпуске пакета — npm run build. Здесь определенно есть отличия в конфигурации.
Теперь создайте два файла, webpack.dev.js и webpack.prod.js, в каталоге сборки, чтобы отличить среду разработки от производственной среды. В то же время общая конфигурация среды разработки и производственной среды прописана в файле webpack.config.js.
- среда разработки
1. Значение атрибута режима веб-пакета установлено на разработку, включение этого параметра не приведет к сжатию кода.
2. Требуется сервер webpack-dev и горячее обновление.
3. CSS не нужно извлекать в отдельный файл и сжимать (конечно можно и его поднять)
4. Нет необходимости очищать содержимое последней сборки перед сборкой.
5. Нет необходимости в анализе упаковки
- Производственная среда
1. Значение атрибута режима веб-пакета установлено на производство, включение этого параметра приведет к сжатию кода.
2. Нет необходимости в webpack-dev-сервере и горячем обновлении.
3. CSS следует извлечь в отдельный файл и сжать
4. Вам необходимо очистить содержимое последней сборки перед сборкой
5, необходимо упаковать анализ
Ну и примерно разобравшись в разнице, нам нужно также отдельно установить другие зависимости, которых у нас нет, для начала установим команду, шаттл:
npm i clean-webpack-plugin copy-webpack-plugin @intervolga/optimize-cssnano-plugin mini-css-extract-plugin webpack-merge webpack-bundle-analyzer -D
- Плагин clean-webpack-plugin в основном используется для очистки последнего упакованного содержимого, потому что после каждого упакованного файла будет генерироваться новое значение хеш-функции. легко причинить ненужные неприятности.
- copy-webpack-plugin Иногда у нас есть статические ресурсы, то есть файлы, которые не участвуют в упаковке, в это время нам нужен этот плагин для реализации копирования и обеспечения доступности ресурсов.
- Файлы css, разделенные @intervolga/optimize-cssnano-plugin, сжаты.
- mini-css-extract-plugin используется для отдельного разделения css.
- webpack-merge Плагин для слияния конфигураций webpack.
- После того, как webpack-bundle-analyzer упакован, вы можете увидеть размер каждого файла js и пропорцию в проекте.
Затем измените соответствующие файлы
6.1. webpack.config.js
Примечание: здесь я поместил miniCssExtractPlugin в общий файл конфигурации, который используется как для разработки, так и для производства Формат здесь немного запутан.
- Обновление: поскольку извлечение файлов само по себе вызовет проблемы, которые не могут быть своевременно обновлены в среде разработки, здесь я по-прежнему переключаюсь на среду разработки, чтобы не извлекать, и производственную среду, чтобы извлекать файлы CSS.
// build/webpack.config.js
// node.js里面自带的操作路径的模块
const path = require("path");
// 引入htmlWebpackPlugin自动导入js文件
const htmlWebpackPlugin = require('html-webpack-plugin');
// 引入vue-loader插件
const VueLoaderPlugin = require('vue-loader/lib/plugin');
// 拷贝静态资源
const copyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
// webpack打包的入口文件
entry: {
main: path.resolve(__dirname, "../src/main.js")
},
// webpack打包的输出相关的额配置
output: {
// 打包过后的文件的输出的路径
path: path.resolve(__dirname, "../dist"),
// 打包后生成的js文件，带hash值来保证文件的唯一性
filename: "js/[name].[hash:4].js",
// 生成的chunk文件名
chunkFilename: "js/[name].[hash:4].js",
// 资源的引用路径（这个跟你打包上线的配置有关系）
publicPath: "/"
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader'
}
]
},
{
test: /\.css$/,
// 这儿组件库的css一般都是处理过的，我们使用一般的loader即可
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
}
]
},
{
test: /\.(jpe?g|png|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
// 当文件大于5kb时走file-loader相关的配置
limit: 5120,
// 这个参数要设置成false,不然生成图片的路径时[object Module]
esModule: false,
// 当文件大于5kb时走file-loader相关的配置
fallback: 'file-loader',
// 生成的路径和文件名
name: 'images/[name].[hash:4].[ext]'
}
}
]
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 5120,
esModule: false,
fallback: 'file-loader',
name: 'media/[name].[hash:4].[ext]'
}
}
]
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 5120,
esModule: false,
fallback: 'file-loader',
name: 'fonts/[name].[hash:4].[ext]'
}
}
]
},
{
test: /\.vue$/,
use: [
{
loader: 'vue-loader',
options: {
compilerOptions: {
preserveWhitespace: false
}
}
}
]
}
]
},
plugins: [
new htmlWebpackPlugin({
// 指定模板
template: path.resolve(__dirname, '../public/index.html'),
// 输出的文件
filename: path.resolve(__dirname, '../dist/index.html')
}),
new VueLoaderPlugin(),
// 新建miniCssExtractPlugin实例并配置
new miniCssExtractPlugin({
filename: 'css/[name].[hash:4].css',
chunkFilename: 'css/[name].[hash:4].css'
}),
// 压缩css
new optimizeCssnanoPlugin({
sourceMap: true,
cssnanoOptions: {
preset: ['default', {
discardComments: {
removeAll: true,
},
}],
},
}),
// 拷贝静态资源
new copyWebpackPlugin([{
from: path.resolve(__dirname, '../public'),
to: path.resolve(__dirname, '../dist')
}])
],
resolve: {
alias: {
// 写了这句，我们可以这样写代码 import Vue from 'vue'
'vue$': 'vue/dist/vue.runtime.esm.js',
// 写了这句，我们可以这样写代码 import api from '@/api/api.js'，省去到处找路径定位到src的麻烦
'@': path.resolve(__dirname, '../src')
},
// 添加一个 resolve.extensions 属性，方便我们引入依赖或者文件的时候可以省略后缀
// 我们在引入文件时可以这样写 import api from '@/api/api'。
extensions: ['*', '.js', '.vue']
}
};
6.2. webpack.dev.js
// build/webpack.dev.js
// 引入webpack
const webpack = require('webpack');
// 引入webpack通用配置
const webpackCommonConfig = require('./webpack.config.js');
// 引入配置合并插件
const merge = require('webpack-merge');
module.exports = merge(webpackCommonConfig, {
// 指定模式，这儿有none production development三个参数可选
// 具体作用请查阅官方文档
mode: "development",
module: {
rules: [
{
test: /\.(scss|sass)$/,
use: [
{
loader: 'style-loader', // 开发环境还是使用style-loader，不然无法及时响应样式变化
},
{
loader: 'css-loader',
},
{
loader: 'sass-loader',
options: {
implementation: require('dart-sass')
}
},
{
loader: 'postcss-loader'
}
]
}
]
},
plugins: [
// 辅助HotModuleReplacementPlugin插件
new webpack.NamedModulesPlugin(),
// 启用热更新必须的
new webpack.HotModuleReplacementPlugin(),
],
devServer: {
// 默认情况不设置这个只能通过localhost:9000来访问，现在可以通过本机局域网ip来访问，
// 比如192.168.12.21:9000，手机在这个局网内也可以访问
host: '0.0.0.0',
hot: true,
port: 9200,
contentBase: './dist'
}
});
6.3. webapck.prod.js
// build/webpack.prod.js
// 引入清除打包后文件的插件（最新版的需要解构，不然会报不是构造函数的错，而且名字必须写CleanWebpackPlugin）
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 引入配置合并插件
const merge = require('webpack-merge');
// 引入通用配置
const webpackCommonConfig = require('./webpack.config.js');
// 分析打包后模块分析插件
const webpackBundleAnalyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = merge(webpackCommonConfig, {
// 指定模式，这儿有none production development三个参数可选
// 具体作用请查阅官方文档
mode: "production",
module: {
rules: [
{
test: /\.(scss|sass)$/,
use: [
{
loader: miniCssExtractPlugin.loader, // 使用miniCssExtractPlugin.loader代替style-loader
},
{
loader: 'css-loader',
},
{
loader: 'sass-loader',
options: {
implementation: require('dart-sass')
}
},
{
loader: 'postcss-loader'
}
]
}
]
},
plugins: [
new CleanWebpackPlugin(),
new webpackBundleAnalyzer({
analyzerMode: 'static'
}),
]
});
После настройки соответствующих файлов мы изменим скрипты в package.json:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --config ./build/webpack.dev.js",
"build": "webpack --config ./build/webpack.prod.js"
},
2019-12-30 обновление
новый
Добавить определение стиля кода (для Vue+VSCode)
Прежде всего, если это проект Vue, вам необходимо установить плагин VSCode.
- Vetur используется для идентификации файлов Vue.
- Обнаружение спецификации кода ESLint JS
- Автоматическое форматирование в стиле кода формата Prettier-Code
Здесь мы в основном настраиваем Eslint. После этой настройки ваш проект будет иметь более подробные подсказки, связанные со стилем кода в процессе разработки. Правила могут быть настроены, что может облегчить целевую самостоятельную настройку различных команд компании. (Здесь я выбрал стандартную спецификацию)
Прежде всего, нам нужно установить различные зависимости, сначала подойдите к этим основным
npm install eslint eslint-plugin-vue -D
- Ядро эслинта.
- eslint-plugin-vue vue создал официальный шаблон документа для обнаружения .vue внутри, js эти.
Следующее расширение вокруг:
npm install babel-eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node -D
- babel-eslint анализирует весь допустимый код babel.
- eslint-config-standard содержит стандартный стиль кода eslint. Конечно, вы также можете выбрать другие стандарты, такие как Google
eslint-config-google, Эйрбнбeslint-config-airbnb, у этих плагинов есть требования к предварительным зависимостям, вы можете использовать эту команду для просмотра предварительных зависимостей, в качестве примера возьмите стандартnpm info "eslint-config-standard@latest" peerDependencies, именно поэтому import, promise, node установлены выше.
- eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node Предварительная зависимость eslint-config-standard
После завершения установки перейдите к следующему шагу и создайте новый в корневом каталоге проекта..eslintrcдокумент.
touch .eslintrc
Добавьте в файл следующую информацию о конфигурации, это всего лишь базовая конфигурация.
{
"root": true,
"env": {
"node": true,
"browser": true
},
"parserOptions": {
"parser": "babel-eslint",
"sourceMap": "module",
"ecmaVersion": 7
},
"extends": [
"plugin:vue/essential",
"standard"
],
"rules": {
"semi": "off", // 关闭语句后不能使用分号的规则
"space-before-function-paren": "off", // 关闭函数函数声明在小括号前必须加空格的规则
"no-trailing-spaces": "off", // 关闭禁用行尾空格
"eol-last": "off", // 关闭要求或禁止文件末尾存在空行
"comma-dangle": "warn" // 出现拖尾逗号仅反馈警告，而不是报错
}
}
Мы также можем настроить проверку компиляции в реальном времени и добавить следующий загрузчик в модуль-> правило веб-пакета (в webpack.dev.js)
Установить eslint-загрузчик
npm install eslint-loader -D
настроить
module: {
rules: [
{
// 这个用来前置执行改loader，我们知道loader是有加载次序的，而且加载次序是有要求的，这个表示在js、vue相关的loader之前执行eslint-loader
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /node_modules/
}
]
}
После добавления вы можете выполнить тест в своем проекте, чтобы увидеть, будет ли сообщено предупреждение или ошибка, например, определение неиспользуемой переменной.
let temp;
Вы также можете создать.eslintignoreФайл, используемый для игнорирования файлов или папок, которые вы не хотите проверять, например, я игнорирую папку node_modules
node_modules
Если вы не хотите вручную изменять правила, созданные eslint для сообщения об ошибках, вы можете использовать команды сценария, чтобы добавить следующий код в package.json:
scripts: {
"lint": "eslint --fix --ext .js,.vue src"
}
Затем выполните:
npm run lint
Это может в основном исправить большинство проблем с форматированием, и если это невозможно исправить, вы можете изменить его только вручную.
Таким образом настраивается eslint, более подробную настройку правил можно найти в официальной документации.
Включить обнаружение eslint при фиксации git
Мы также можем быть более строгими, то есть код, который не соответствует спецификации, не разрешается быть представленным. (Здесь с помощью Git крючки см. Здесь подробности:адрес ссылки)
Сначала нам нужно установить зависимость:
npm install husky -D
Затем создайте новый файл в корневом каталоге.huskyrc. Добавьте внутрь следующий код:
{
"hooks": {
"pre-commit": "npm run lint:commit"
}
}
Добавьте новый скрипт в package.json:
"lint:commit": "eslint --ext .js,.vue src"
Таким образом, вы будете сначала проверять стиль кода каждый раз, когда отправляете код.
- В качестве дополнения, сообщение об ошибке eslint по умолчанию выглядит недостаточно дружелюбным, вы можете использовать этот инструмент для преобразования формата.
Установите зависимости:
npm install eslint-friendly-formatter -D
Добавьте следующий код в webpack.config.js:
{
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /node_modules/,
options: {
formatter: require('eslint-friendly-formatter')
}
}
- Справочная статьяадрес ссылки адрес ссылки адрес ссылки адрес ссылки адрес ссылки адрес ссылки адрес ссылки
Отображение ошибок на страницах браузера
Как правило, наш отчет об ошибках можно просмотреть только на консольной панели браузера, и мы можем напрямую отобразить его в интерфейсе.
Добавьте наложение к свойству devServer:
devServer: {
host: '0.0.0.0',
hot: true,
port: 9200,
contentBase: './dist',
clientLogLevel: "error", // 关闭在浏览器控制台显示消息的功能，可能的值有 none, error, warning 或者 info（默认值）。这里我设置为只显示错误消息
overlay: {
errors: true,
warnings: true
}
}
После выполнения команды npm run dev улучшите отображение информации в консоли.
После запуска webpack-dev-server по умолчанию консоль выводит большое количество выходной информации, что выглядит немного раздражающим. Как показано ниже
Если нам нужно отобразить красивую информацию, нам нужно выполнить следующую настройку: сначала настроить параметр devServer в webpack.config.js.
devServer: {
host: '0.0.0.0',
hot: true,
port: 9866,
contentBase: './dist',
clientLogLevel: 'error',
overlay: {
errors: true,
warnings: true
},
quiet: true
}
Устанавливаем значение quiet в true, чтобы мы не видели большую строку выводимой информации, и нам нужен плагин для замены выводимой информации, устанавливаем плагин
npm install friendly-errors-webpack-plugin -D
Добавьте следующий оператор в webpack.config.js
const friendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
plugins: [
// ...... 省略的语句
new friendlyErrorsWebpackPlugin()
]
Это оно.использованная литература
наконец
Соответствующая конфигурация здесь, и мы продолжим обновлять контент оптимизации на более позднем этапе, например, разделение кода.Эта статья посвящена тому, как создать среду и запустить ее, а не оптимизации соответствующего контента. Если есть какие-либо ошибки, пожалуйста, поделитесь ими и укажите на них.Если вы считаете, что это хорошо, ставьте палец вверх и поехали!
Я отправил соответствующий код на склад,адрес ссылки