Автор сенсационных заголовков
Кратко изложите общую конфигурацию Webpack4, включая DEMO, шаг за шагом, подробно и немного длиннее, и мы предоставим файл исходного кода в конце продолжения.
Подготовьте среду разработки
- 安装node
- 安装webpack
- npm init 初始化项目
Структура каталогов
Напишите и запустите небольшую демонстрацию
// src/index.js
import _ from 'lodash'
function create_div_element () {
const div_element = document.createElement('div')
div_element.innerHTML = _.join(['kobe', 'cpul'], ' ')
return div_element
}
const div_ele = create_div_element()
document.body.appendChild(div_ele)
// dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack4</title>
</head>
<body>
<script src="./bound.js"></script>
</body>
</html>
// webpack.config.js
const path = require('path')
module.exports = {
entry: './src/index.js',
mode: 'development',
output: {
filename: 'bound.js',
path: path.resolve(__dirname, 'dist')
}
}
затем пройтиnpxВыполнить webpack для упаковки.
Или дублировать команду сценария тоже можно.
"scripts": {
"build": "npx webpack -c webpack.config.js"
}
npx webpack
Откройте index.html в браузере, и вы обнаружите, что код выполняется успешно.
webpack обрабатывает CSS
Предположим, теперь нам нужно импортировать файл css в index.js.
// index.js
import './style/reset.css'
Нам нужно использовать специальный загрузчик для разбора css и вставки css в html файл.
npm i -D css-loader style-loader
Измените файл конфигурации веб-пакета
const path = require('path')
module.exports = {
entry: './src/index.js',
mode: 'development',
output: {
filename: 'bound.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css/,
use: ['style-loader', 'css-loader'] // use的顺序从右往左
}
]
}
}
В это время, когда вы выполняете index.html в NPX WebPack, после упаковки, вы обнаружите, что CSS успешно вводится.
webpack обрабатывает файл sass
Теперь внешние проекты используют некоторые препроцессоры css, чтобы лучше использовать CSS, такие как Sass.
Предположим, теперь нам нужно добавить файл base.scss в index.js. Итак, как меняется webpack для обработки файлов sass/scss?
npm install sass-loader node-sass -D
// src/style/base.scss
$bd-bg: pink;
body {
background: $bd-bg;
}
// index.js
import './style/base.scss'
Измените файл конфигурации для обработки scss
const path = require('path')
module.exports = {
entry: './src/index.js',
mode: 'development',
output: {
filename: 'bound.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.(sc|sa|c)ss$/,
use: ['style-loader', 'css-loader', 'sass-loader'] // use的顺序从右往左
}
]
}
}
webpack добавляет исходную карту в sass
Исходная карта настроена так, чтобы облегчить нам обнаружение и отладку при возникновении ошибки.Конечно, нам не нужно запускать это в производственной среде.
Нам нравится пример выше, вы найдете тот пакет, из которого мы не видим файл scss.
Измените файл конфигурации веб-пакета.
const path = require('path')
module.exports = {
entry: './src/index.js',
mode: 'development',
output: {
filename: 'bound.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.(sc|sa|c)ss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
}
]
}
}
После упаковки откройте index.html в браузере.
webpack добавляет префикс CSS3 в css
PostCSSЭто инструмент для преобразования кода CSS с помощью инструментов и плагинов JavaScript. Он обладает мощными функциями. Наиболее часто используемый из них — использовать PostCSS, чтобы помочь нам Autoprefixer автоматически получать популярность браузера и свойства, которые могут поддерживаться, и автоматически добавлять CSS правила для вас на основе этих данных префикс.
npm i -D postcss-loader autoprefixer postcss-import
// postcss-import: 在使用@import css文件时候让webpack可以监听并编译
// postcss-nextcss: 支持css4
Изменить файл конфигурации
rules: [
{
test: /\.(sc|sa|c)ss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
sourceMap: true,
plugins: loader => [
// 可以配置多个插件
require('autoprefixer')({
browsers: [' > 0.15% in CN ']
})
]
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
}
]
Извлеките таблицу стилей в отдельный файл css и введите номер версии.
Предпосылка извлечения CSS заключается в том, что мы делаем это только в производственной среде, поэтому ваш файл конфигурации имеет вид: production.
Кроме того, вы не можете использовать style-loader для вставки в html-файлы без css.
npm i -D mini-css-extract-plugin
Настройте скрипт с именем
"scripts": {
"dist": "cross-env NODE_ENV=production npx webpack --progress --config webpack.prod.config.js"
},
Добавьте webpack.prod.config.js Конечно, для официального проекта мы разделим файл конфигурации, а затем обработаем его через слияние.
- webpack.base.config.js
- webpack.dev.config.js
- webpack.prod.config.js
- webpack.vue.config.js
Демонстрация не делает этого здесь, поэтому код немного избыточен.
// webpack.prod.config.js
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const devMode = process.env.NODE_ENV !== 'production'
module.exports = {
entry: './src/index.js',
mode: 'production',
output: {
filename: 'bound.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.(sc|sa|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader'
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: (loader) => [
require('autoprefixer')({
browsers: [
'last 10 Chrome versions',
'last 5 Firefox versions',
'Safari >= 6',
'ie > 8'
]
})
]
}
},
{
loader: 'sass-loader'
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: devMode ? '[name].css' : '[name].[hash:5].css', // 设置输出的文件名
chunkFilename: devMode ? '[id].css': '[id].[hash:5].css'
})
]
}
После упаковки вы найдете
На данный момент, если мы его используем, то можем ссылаться на него только в index.html, что явно неудобно, т.к. наш css файл должен быть очень большим, а эта проблема будет решена позже, поэтому я ее здесь пропущу.
webpack минимизирует JS и CSS
Функция сжатия, естественно, заключается в уменьшении размера пакета и повышении эффективности загрузки, поэтому сжатие настраивается в производственной среде.
сжать css
Более поздние версии Webpack должны иметь встроенное сжатие CSS, которое в настоящее время настраивается вручную.
npm i -D optimize-css-assets-webpack-plugin
Измените файл конфигурации:
const OptimizeCSSAssertsPlugin = require('optimize-css-assets-webpack-plugin')
optimization: {
minimizer: [
// 压缩CSS
new OptimizeCSSAssertsPlugin({})
]
}
JS-сжатие
npm i -D uglifyjs-webpack-plugin
Изменить файл конфигурации
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
optimization: {
minimizer: [
// 压缩JS
new UglifyJsPlugin({
// 有很多可以配置
cache: true,
parallel: true,
sourceMap: true,
uglifyOptions: {
// 在UglifyJs删除没有用到的代码时不输出警告
warnings: false,
output: {
// 删除所有的注释
comments: false,
// 最紧凑的输出
beautify: false
},
compress: {
// 删除所有的 `console` 语句
// 还可以兼容ie浏览器
drop_console: true,
// 内嵌定义了但是只用到一次的变量
collapse_vars: true,
// 提取出出现多次但是没有定义成变量去引用的静态值
reduce_vars: true,
}
}
})
]
}
В это время, когда я пошел паковать, я обнаружил ошибку,ERROR in js/background.js from UglifyJs Unexpected token: keyword (const).
Uglify-js не поддерживает синтаксис es6, пожалуйста, используйте плагин terser, поэтому мы стараемся использовать плагин terser.На самом деле, вы можете продолжать использовать плагин uglifyjs-webpack-plugin, вам просто нужно сотрудничать с babel чтобы передать его в первую очередь.
npm install terser-webpack-plugin -D
Дополнительные сведения см. на официальном сайте.terser-webpack-plugin.
optimization: {
minimizer: [
// 压缩JS
new TerserPlugin({
cache: true,
parallel: true,
sourceMap: true,
// 等等详细配置见官网
}),
]
}