После подтверждения ваших глаз вы все еще не готовы к осенним рекрутам? ограниченный срок. Поскольку Jingdong начал набор стажеров для руководителей 8 июня, это означает начало осеннего набора. А вы все еще ждете прихода осени? В этом году ситуация должна быть более жесткой, поскольку экосистема основных технологий (vue, webpack, react, апплет WeChat) становится все более зрелой, это также означает, что нам нужно глубже их понимать и осваивать. Например, если вы пишете проект vue, вы знаете vue-cli. Написанные проекты также не имеют себе равных, но пойдете ли вы разбираться, что случилось с vue-cli? Возможно, интервьюер хочет задать вам этот вопрос: пожалуйста, напишите конфигурацию webpack4.0.
предисловие
Возможности всегда зарезервированы для тех, кто готов.Если вы хотите преуспеть в этом хаотичном сезоне поиска работы, вы можете выиграть долгожданное предложение. Тогда вам следует знать много такого, чего не знают другие, чтобы ваши крылья были полны и вы могли парить в небе. Орлы поражают небо не по своей природе, а из-за опасности скал, когда они были молодыми. Глупые птицы летят первыми, полагаясь не на мудрость, а на неустанные усилия.
Подробное объяснение веб-пакета
webpack — это инструмент для упаковки, его цель — упаковать все статические ресурсы. Некоторые люди спросят, почему webpack? Webpack является краеугольным камнем современных интерфейсных технологий, а традиционные методы разработки, такие как jquery, html и css, статическая веб-разработка отстают. Это эпоха MVVM, интерфейсов, управляемых данными. Webpack содержит множество новых и полезных технологий для современной разработки js. Описание веб-пакета подавляющее, я не буду тратить время. Изучите изображение ниже, чтобы узнать об экосистеме веб-пакета:
Конфигурация веб-пакета 4.0
const path = require('path'); //引入node的path模块
const webpack = require('webpack'); //引入的webpack,使用lodash
const HtmlWebpackPlugin = require('html-webpack-plugin') //将html打包
const ExtractTextPlugin = require('extract-text-webpack-plugin') //打包的css拆分,将一部分抽离出来
const CopyWebpackPlugin = require('copy-webpack-plugin')
// console.log(path.resolve(__dirname,'dist')); //物理地址拼接
module.exports = {
entry: './src/index.js', //入口文件 在vue-cli main.js
output: { //webpack如何输出
path: path.resolve(__dirname, 'dist'), //定位，输出文件的目标路径
filename: '[name].js'
},
module: { //模块的相关配置
rules: [ //根据文件的后缀提供一个loader,解析规则
{
test: /\.js$/, //es6 => es5
include: [
path.resolve(__dirname, 'src')
],
// exclude:[], 不匹配选项（优先级高于test和include）
use: 'babel-loader'
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
'less-loader'
]
})
},
{ //图片loader
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader' //根据文件地址加载文件
}
]
}
]
},
resolve: { //解析模块的可选项
// modules: [ ]//模块的查找目录 配置其他的css等文件
extensions: [".js", ".json", ".jsx",".less", ".css"], //用到文件的扩展名
alias: { //模快别名列表
utils: path.resolve(__dirname,'src/utils')
}
},
plugins: [ //插进的引用, 压缩，分离美化
new ExtractTextPlugin('[name].css'), //[name] 默认 也可以自定义name 声明使用
new HtmlWebpackPlugin({ //将模板的头部和尾部添加css和js模板,dist 目录发布到服务器上，项目包。可以直接上线
file: 'index.html', //打造单页面运用 最后运行的不是这个
template: 'src/index.html' //vue-cli放在跟目录下
}),
new CopyWebpackPlugin([ //src下其他的文件直接复制到dist目录下
{ from:'src/assets/favicon.ico',to: 'favicon.ico' }
]),
new webpack.ProvidePlugin({ //引用框架 jquery lodash工具库是很多组件会复用的，省去了import
'_': 'lodash' //引用webpack
})
],
devServer: { //服务于webpack-dev-server 内部封装了一个express
port: '8080',
before(app) {
app.get('/api/test.json', (req, res) => {
res.json({
code: 200,
message: 'Hello World'
})
})
}
}
}
Во-первых, создание внешней среды
Используем npm или yarn для установки webpack
npm install webpack webpack-cli -g
# 或者
yarn global add webpack webpack-cli
ЗачемwebpackБудет ли он разделен на два файла? В веб-пакете 3 сам веб-пакет и его кли были в одном пакете, но в версии 4 они были разделены, чтобы лучше управлять ими.
Создайте новую папку webpack, создайте в ней новый try-webpack (чтобы имя проекта и установочный пакет не совпадали во время инициализации), а затем инициализируйте и настройте webpack.
npm init -y //-y 默认所有的配置
yarn add webpack webpack-cli -D //-D webpack安装在devDependencies环境中
2. Разверните веб-пакет
В проекте среды, созданном выше, мы переходим к package.json, чтобы настроить наши скрипты и позволить веб-пакету
"scripts": {
"build": "webpack --mode production" //我们在这里配置，就可以使用npm run build 启动我们的webpack
},
"devDependencies": {
"webpack": "^4.16.0",
"webpack-cli": "^3.0.8"
}
После настройки рабочей среды нашего веб-пакета подумайте о vue-cli. Обычно использование vue-cli автоматически помогает нам настраивать и создавать проекты. Мы разрабатываем проект под src, и, наконец, npm запускаем пакеты сборки и создаем наш каталог dist. Я не знаю, помните ли вы еще, давайте перейдем к следующему разделу и давайте прочувствуем весь процесс.
3. Что случилось со сборкой npm run
Создайте новый каталог src в try-webpack под нашим корневым проектом. Создайте новый файл index.js в каталоге src. В нем мы можем написать произвольный код, ориентируясь на случай:
const a = 1;
После написания запускаем в терминале нашу команду npm run build, вы обнаружите, что добавилась новая директория dist, в которой хранится упакованный webpack файл main.js. Это то же самое, что мы делаем в vue-cli.
В-четвертых, статьи о процессе настройки webpackp
Какие файлы мы обычно упаковываем в src при разработке? Можно вспомнить, что на самом деле src проекта vue-cli — это не просто следующие пункты:
- html, css, js обязательны при публикации
- css прекомпилятор стилус, меньше, sass
- Расширенный синтаксис для es6
- Ресурсы изображений .png, .gif, .ico, .jpg
- требовать между файлами
- Модификаторы, такие как псевдоним @
Затем я объясню настройку webpack.config.js в webpack в этих пунктах и следую шагам, чтобы шаг за шагом выполнить нашу технологическую линию.
✍️Конфигурация HTML в веб-пакете
Создайте новый файл webpack.config.js в корневом каталоге проекта try-webpack, экспортируйте его с помощью модульного механизма commonJS и создайте новый index.html.
module.exports = {}
Настройте нашу входную запись, которая эквивалентна main.js в том же каталоге в vue-cli, наш экспортный вывод. Мы можем понимать webpack как фабрику.Ввод эквивалентен закладке различного сырья на нашу фабрику, а затем фабрика выполняет ряд упаковочных операций для экспорта упакованных вещей, а затем их можно продать (онлайн).
const path = require('path'); //引入我们的node模块里的path
//测试下 console.log(path.resolve(__dirname,'dist')); //物理地址拼接
module.exports = {
entry: './src/index.js', //入口文件 在vue-cli main.js
output: { //webpack如何向外输出
path: path.resolve(__dirname, 'dist'),//定位，输出文件的目标路径
filename: '[name].js' //文件名[name].js默认，也可自行配置
},
HTML-упаковку нам нужно установить и внедрить html-webpack-plugin
yarn add html-webpack-plugin -D //在开发环境中安装
const HtmlWebpackPlugin = require('html-webpack-plugin') //引入打包我们的HTML
Настраиваем наши плагины (плагины) в module.exports:
plugins: [ //插进的引用, 压缩，分离美化
new HtmlWebpackPlugin({ //将模板的头部和尾部添加css和js模板,dist 目录发布到服务器上，项目包。可以直接上线
file: 'index.html', //打造单页面运用 最后运行的不是这个
template: 'src/index.html' //vue-cli放在跟目录下
}),
],
После настройки, после ввода npm run dev в терминале, webpack упакует наш html и автоматически импортирует наш js.
<body>
<p class="main">Hello World</p>
<script type="text/javascript" src="main.js"></script>
</body>
Разделите наш каталог dist, запустите порт 8080, и мы сможем увидеть наш Hello World. Это наша онлайн-версия страницы.
🍉настройка css в webpack
В нашем vue-cli мы можем использовать css для написания наших стилей, или мы можем использовать расширенный стилус, less, sass и другие прекомпиляторы. Давайте возьмем less в качестве примера, чтобы увидеть, как webpack упаковывает его в css.
.main {
color: red;
}
Создайте наш файл style.less в каталоге src.Перед настройкой нам нужно npm наш css-загрузчик и sass-загрузчик, sass
yarn add css-loader less less-loader style-loader -D
После выполнения вышеуказанной команды мы можем увидеть наш файл конфигурации в package.json.
"devDependencies": {
"css-loader": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"sass": "^1.9.0",
"sass-loader": "^7.0.3",
"webpack": "^4.16.0",
"webpack-cli": "^3.0.8"
}
После установки мы начинаем настраивать файл webpack.config.js. Здесь указано, что наш css должен быть отделен от нашего HTML в каталоге dist, который должен представить наш плагин extract-text-webpack-plugin, сначала мы устанавливаем его
yarn add extract-text-webpack-plugin -D
Тут есть ямка, extract-text-webpack-plugin не поддерживает такую установку в 4.0, можно самому хромировать. Значит выбираем другой путь, выбираем версию 4.00-beta.0
yarn add extract-text-webpack-plugin@last -D
Заходите к нам в module.exports и завершите настройку моделя
const ExtractTextPlugin = require('extract-text-webpack-plugin') //打包的css拆分,将一部分抽离出来
module: { //模块的相关配置
rules: [ //根据文件的后缀提供一个loader,解析规则
{
test: /\.less$/, //正则匹配我们以.less结尾的文件
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
'less-loader'
]
})
},
]},
plugins：[
new ExtractTextPlugin('[name].css'), //[name] 默认 也可以自定义name 声明使用
]
У нас нет нашего css после выполнения нашей сборки npm run, почему? Оказалось css в js в конфигурации webpack. Это означает, что наш css упакован в наш js, поэтому мы ввели плагин extract-text-webpack-plugin, чтобы удалить из него css. Но другой вопрос, механизм require?
В процессе упаковки требуемые ссылки на файлы упаковываются по порядку, что является механизмом зависимостей файлов.
После упаковки мы оказались в лайв-сервере и обнаружили, что наши стили тоже поднялись, а css часть отделилась.
🍊настройка js в webpack
Теперь, с ростом популярности es6, все больше и больше кодов используют es6, но многие браузеры не поддерживают es6, например async/aviat, const. Поэтому нам нужно сослаться на babe, чтобы скомпилировать наш код es6 в es5. Создайте новый .babelrc в каталоге с простой конфигурацией
{"presets": ["env"]}
Установите наш Babel и настройте его в модуле/правилах в webpack.config.js.
yarn add babel-loader babel-core abel-preset-env -D //babel基本的三个文件
{
test: /\.js$/, //es6 => es5
include: [
path.resolve(__dirname, 'src')
],
// exclude:[], 不匹配选项（优先级高于test和include）
use: 'babel-loader'
},
🥕Настройка ресурсов изображения в вебпаке
Создайте новый файл ресурсов в каталоге src и поместите в него несколько изображений. Установите загрузчик файлов, чтобы загрузить файл в соответствии с адресом файла
пряжа добавить загрузчик файлов -D модуль/правила в webpack.config.js
{
test: /\.(png|jpg|gif)$/, //匹配所有格式的图片资源
use: [
{
loader: 'file-loader'
}
]
}
🍌Конфигурация псевдонима (@) в веб-пакете
В src/index.js мы вводим
const format = require('utils/format') // utils ? 没有相对路径 回想@ => 别名
在src新建相应的文件。在format.js里接受一个参数并把它转成大写
module.exports = function format(chars) {
return chars.toUpperCase()
}
Как настроить наш псевдоним в webpack? В vue-cli у нас часто @ папка, значит в каталоге src, сейчас разберемся. Под модулем обратите внимание на тот же уровень, что и правила
resolve: { //解析模块的可选项
// modules: [ ]//模块的查找目录 配置其他的css等文件
extensions: [".js", ".json", ".jsx",".less", ".css"], //用到文件的扩展名
alias: { //模快别名列表
utils: path.resolve(__dirname,'src/utils')
}
},
🍒 Конфигурация некоторых других статических ресурсов в webpack
- Другие файлы в src копируются напрямую в каталог dist. Не каждый файл нужно упаковывать и обрабатывать. Многие ресурсы можно копировать напрямую. Используйте наш плагин CopyWebpackPlugin
- Эталонная библиотека инструментов jquery lodash повторно используется многими компонентами, что устраняет необходимость в импорте. Используйте плагин webpack.ProvidePlugin
5. Что случилось с npm run dev
В vue-cli запускаем мониторинг npm run dev, чтобы время от времени следить за изменениями файлов под нашим src, так что же с ним случилось. По сути, в webpack создается нод-процесс, а внутри него через webpack-dev-server инкапсулируется нод-экспресс модуль, элементы конфигурации такие
"scripts": { //在package.json里声明下使用脚本 npm run dev
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development"
},
devServer: { //在webpack.config.js里配置port
port: '8080',
before(app) {
app.get('/api/test.json', (req, res) => {
res.json({
code: 200,
message: 'Hello World'
})
})
}
} //服务于webpack-dev-server 内部封装了一个express
сообщение
Webpack широк и глубок, и это только начало. Не бывает в одночасье изучить то, что на самом деле в ней есть. Tapable, жизненный цикл webpack и т. д. Если вы хотите глубже понять веб-пакет, рекомендуетсяКоманда Tencent ivwebГлубокое погружение в веб-пакет. Это тоже то, что я наблюдал в последнее время.Только понимая больше, вы можете летать дальше. Была поздняя ночь, и время пролетело быстро. Хозяин тоже слишком сонный, поэтому я перестал писать сюда, надеюсь, вы меня потерпите. Прикрепите мою обучающую демонстрацию github о конфигурации webpack4.0кликните сюда.