这是我参与11月更文挑战的第8天,活动详情查看:2021最后一次更文挑战
(一) webpack5之初体验 (二) webpack5之核心配置
1, CSS样式文件提取
在之前的配置文件中,所有的css样式代码都被编译成js代码,在js文件中,在生产环境中,为了加快静态资源的下载,打包的时候,可以通过插件提取出单独的CSS文件。
(1) 插件安装
npm i mini-css-extract-plugin -D
(2) 配置
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
plugins: [
new MiniCssExtractPlugin()
]
注意:之前讲过:
style-loader
是创建style标签,将样式嵌入
css-loader
是将css文件整合到JS文件中
如果要使用MiniCssExtractPlugin
插件,就必须删除带哦style-loader, 通过下面的loader代替,作用就是:提取JS中的CSS成单独文件
MiniCssExtractPlugin.loader
(3) 为提出的CSS文件指定输出路径和重命名,详细的配置参考下面的代码
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { resolve } = require('path')
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/bundle.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
use: [
// 'style-loader',
MiniCssExtractPlugin.loader,
'css-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
// 单独提出css文件重命名
filename: 'css/bundle.css'
})
],
mode: 'development'
};
2, CSS兼容性处理
为适配各个厂商的浏览器,需要对CSS进行兼容性处理。一般处理兼容性方法,需要安装:
postcss-loader
, postcss-preset-env
(1) 安装插件
npm i postcss-loader postcss-preset-env -D
(2) 添加配置
注意:webpack4 和 webpack5此处不一样
webpack5 配置
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
require('postcss-preset-env')()
]
}
}
}
webpack4 配置
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
// 使用postcss插件
require('postcss-preset-env')()
]
}
}
原理: 配置完postcss-loader
之前, 还需要修改该loader
的配置,不能使用默认loader
, 需要配置 postcss-preset-env
插件, 因为它会帮助postcss
找到package.json
中的browserslist
里面的配置, 通过配置加载指定的CSS兼容性样式。
在package.json
中添加下面的配置
"browserslist": {
"development": [
"last 1 chrome version", // 兼容最近的chrome浏览器版本
"last 1 firefox version", // 兼容最近的firefox浏览器版本
"last 1 safari version" // 兼容最近的safari浏览器版本
],
"production": [
">0.2%", // 包含了99.8%的浏览器
"not dead", // 排除掉已经废弃的浏览器
"not op_mini all"
]
}
下面是package.json代码截图
如果想查看详细的browserslist
的配置,可以查看github介绍
3, 压缩CSS文件
(1)插件安装
npm i optimize-css-assets-webpack-plugin -D
(2) 引入插件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
(3) 配置插件
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/bundle.css'
}),
// 压缩CSS
new OptimizeCssAssetsWebpackPlugin()
],
4, ESLint语法检查
语法检查,主要是服务于团队开发,保持大家一致的开发习惯,在webpack中配置eslint语法规范,需要提前安装eslint-loader
, eslint
还要注意:只检查用户自己写的JS文件,不检查第三方库的JS代码, 而且还要设置检查规则, 在package.json文件中设置, 具体的配置步骤:
(1) 安装插件
npm i eslint-loader eslint -D
为了使用aribnb规范进行检查,还需要安装插件 aribnb依赖的插件,总结一下:
airbnb
—> eslint-config-airbnb-base
, eslint
, eslint-plugin-import
npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D
(2) 配置插件
module: {
rules: [
// 语法检查 eslint-loader , eslint
{
test: /\.js$/,
exclude: /node_modules/,
enforce: 'pre',
loader: 'eslint-loader',
options: {
// 自动修复eslint语法
fix: true
}
}
]
},
(3) 设置检查规则
package.json中对eslintConfig进行设置
"eslintConfig": {
"extends": "airbnb-base"
}
如果想单独过滤到某一条
即:下一行eslint所有规则都失效
// eslint-disable-next-line
console.log(add(2, 1));
踩坑记:
在安装上面的操作之后,webpack版本不一样有报错,每次通过webpack进行编译的时候,报错
Module build failed (from ../node_modules/eslint-loader/dist/cjs.js): TypeError: Cannot read property 'getFormatter' of undefined
解决方案:执行下面命令
npx install-peerdeps --dev eslint-config-airbnb-base
5, JS兼容性处理
JS兼容性处理需要:babel-loader
, @babel/preset-env
, @babel/core
, @babel/polyfill
(1)插件安装
npm i babel-loader @babel/preset-env @babel/core @babel/polyfill -D
(2)添加配置
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
// 预设: 指示babel做怎么样的兼容性处理
presets: ['@babel/preset-env'],
},
},
(3) 引入插件
import '@babel/polyfill'
存在的问题: 引入了所有的兼容性处理代码,导致包太大了,所有我们需要按需加载,需要 core-js
下面是兼容性处理的方案(2)
下载:core-js
npm i core-js -D
添加配置
options: {
// 预设: 指示babel做怎么样的兼容性处理
presets: [
'@babel/preset-env',
{
useBiltIns: 'usage',
corejs: {
version: 3,
},
// 指定兼容到哪个版本的浏览器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
],
},
此时要注意: 注释到 之前的引入
// import '@babel/polyfill' 使用了core-js, 放弃这个方案