3.1 提取css为单独的样式文件
3.1.1 mini-css-extract-plugin
mini-css-extract-plugin 是一个用于将 CSS 提取为单独文件的插件，它可以帮助优化网页加载速度和样式文件的缓存策略。
以下是使用 mini-css-extract-plugin 的一般步骤：
首先，安装 mini-css-extract-plugin，我这里指定了此时调试的版本
npm install mini-css-extract-plugin@0.9.0 --D
2 在 webpack 的配置文件中引入 mini-css-extract-plugin：
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
3 在 plugins 配置中实例化 MiniCssExtractPlugin：
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].[contenthash].css', // 提取后的 CSS文件名和路径
}),
],
4 在 module.rules 配置中配置 CSS 文件的处理规则，使用 MiniCssExtractPlugin.loader 替代原来的 style-loader：
module: {
rules: [
{
test: /\.css$/,
use: [ MiniCssExtractPlugin.loader, 'css-loader', ]
},
],
},
注意，mini-css-extract-plugin 通常在生产环境中使用，因为在开发环境中使用提取 CSS 的插件可能会增加编译时间。在开发环境中，可以继续使用 style-loader 将 CSS 注入到页面中。
3.2 css 兼容性处理
3.2.1 postcss
首先我们要安装postcss 、 postcss-loader 、postcss-preset-env
npm install postcss@8.4.21 postcss-loader@3.0.0 postcss-preset-env@6.7.0 --D
2 在webpack配置文件中配置postcss-loader
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
require('postcss-preset-env')()
]
}
}
postcss-preset-env 的作用是帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式
3 在package.json 中配置browserslist
"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
// 生产环境：默认是看生产环境
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
}
browserslist里默认执行的是development里的配置，这里跟mode中的环境配置无关，而是node中的环境，我们通过设置node环境变量来执行指定的browserslist的配置
// 在webpack配置文件中设置node的环境变量
process.env.NODE_ENV = development
3.3 压缩css
3.3.1 optimize-css-assets-webpack-plugin
optimize-css-assets-webpack-plugin 是一个用于优化和压缩 CSS 资源的 Webpack 插件。它可以帮助减小 CSS 文件的体积，提高页面加载速度。
首先，需要安装 optimize-css-assets-webpack-plugin 插件。运行以下命令来安装它：
npm install optimize-css-assets-webpack-plugin@6.0.1 --D
2 在 Webpack 配置文件中引入 optimize-css-assets-webpack-plugin 插件：
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
3 在plugins中使用
new OptimizeCssAssetsWebpackPlugin()
3.4 js语法检查
3.4.1 ESlint
ESLint 是一个用于检查 JavaScript 代码质量和风格的静态代码分析工具。它可以帮助开发团队遵循一致的编码规范，并发现常见的代码错误和潜在的问题。它有很多相对应的代码风格的库，我们这里以airbnb-base风格为例。
首先安装相关依赖
npm install eslint@6.8.0 eslint-loader@3.0.3 eslint-plugin-import@2.20.1 eslint-config-airbnb-base@14.0.0 --D
2 在webpack配置文件中配置loader
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
fix: true
}
}
3 在package.json中配置eslintConfig
"eslintConfig": {
"extends": "airbnb-base",
"env": {
"browser": true
}
},
3.5 js兼容性处理
3.5.1 基本兼容性处理
首先安装相关依赖
npm install babel@6.23.0 babel-loader@8.3.0 @babel/preset-env@7.20.2 @babel/core@7.21.0 --D
2 在webpack配置文件中配置loader
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
// 预设：指示babel做怎么样的兼容性处理
presets: [
'@babel/preset-env'
]
}
}
基本处理不能处理promise等高级语法。
3.5.2 全部兼容性处理
首先 安装 @bable/polyfill的依赖包
npm install @bable/polyfill@7.8.2 --D
2 在入口文件中引入这个包
import '@babel/polyfill';
3.5.3 按需加载兼容性处理
我们使用core.js 这个库来做按需处理js兼容性问题。Core.js 是由 Babel 团队开发的。Babel 是一个用于将现代 JavaScript 代码转换为向后兼容版本的工具，而 Core.js 是 Babel 团队为实现 ECMAScript 新特性的兼容性而开发的一个库。
首先，安装corejs的依赖包
npm install core-js@3.29.0 --D
在webpack中配置loader
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
// 预设：指示babel做怎么样的兼容性处理
presets: [
[
'@babel/preset-env',
{
// 按需加载
useBuiltIns: 'usage',
// 指定core-js版本
corejs: {
version: 3
},
// 指定兼容性做到哪个版本浏览器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
}
3.6 html和js的压缩
当我们开启mode 为 production时，会自动压缩html和js。也就是说，生产环境会自动压缩html和js文件。
