🤓😍Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-前端领域博主
🐱‍🐉若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！👍*
🐞🐞文章若有错误或某个内容有更优的解决方案，还望指正！👍*
更多webpack入门知识，详细解读webpack的基本使用、进阶优化等；请阅读专栏：sam9029–CSDN博客—Webpack入门笔记
或者访问 作者个人博客网站：sam9029.asia—Webpack入门笔记

提取单独的CSS文件以优化性能

由于 webpack 默认只会处理JS文件和生成JS文件

所有 css 文件默认被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式

这样对于网站来说，会出现闪屏现象，用户体验不好

我们应该是单独的 Css 文件，通过 link 标签加载性能才好

同时也涉及到了三个操作

• 提取 CSS 文件 （mini-css-extract-plugin）
• 对 CSS 文件 进行兼容处理（postcss-loader postcss postcss-preset-env）
• 压缩 CSS 文件 （css-minimizer-webpack-plugin）

提取 CSS 文件 （mini-css-extract-plugin）

安装

npm i mini-css-extract-plugin -D

mini-css-extract-plugin ，它是一个webpack插件，用于将CSS文件从JavaScript文件中提取出来，生成独立的CSS文件。

配置webpack.config.js

// webpack.config.js//... 其他配置
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 引入单独提取module.exports = {entry: "./src/main.js",output: {//... 其他配置},module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: [MiniCssExtractPlugin.loader, "css-loader"], // css文件单独提取loader配置},{test: /\.less$/,use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"], // css文件单独提取loader配置},{test: /\.s[ac]ss$/,use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"], // css文件单独提取loader配置},//... 其他配置],},plugins: [//... 其他配置// 提取css成单独文件new MiniCssExtractPlugin({// 定义输出文件名和目录filename: "static/css/main.css",}),],mode: "production",
};

对 CSS 文件 进行兼容处理（postcss-loader postcss postcss-preset-env）

安装

npm i postcss-loader postcss postcss-preset-env -D

postcss-loader：这是一个webpack loader，用于在webpack构建过程中处理CSS文件，特别是使用PostCSS进行处理。

postcss：PostCSS是一个用JavaScript工具和插件生态系统来转换CSS代码的工具。它允许你使用最新的CSS语法，并且可以通过插件来扩展其功能。

postcss-preset-env：这是一个PostCSS的插件，提供了未来CSS规范中的特性，使得你可以在现代浏览器中使用它们，同时保持向后兼容性。

配置CSS兼容的层级

我们可以在！！！ package.json ！！！文件中添加 browserslist 来控制样式的兼容性做到什么程度。

{// 其他省略"browserslist": ["ie >= 8"]
}

想要知道更多的 browserslist 配置，查看browserslist 文档open in new window

以上为了测试兼容性所以设置兼容浏览器 ie8 以上。

实际开发中我们一般不考虑旧版本浏览器了，所以我们可以这样设置：

{// 其他省略"browserslist": ["last 2 version", "> 1%", "not dead"]
}

配置webpack.config.js

合并配置样式的Loaders

/*** @description 获取处理css样式的loaders工具配置函数, 配置了基础的loader，同时接收传参自定义loader* @param {Array} preProcessorList []* @returns*/
const setStyleLoaders = (preProcessorList = []) => {return [// 单独提取css文件loaderMiniCssExtractPlugin.loader,// 基础css-loader"css-loader",// css代码兼容处理loader配置{loader: "postcss-loader",options: {postcssOptions: {plugins: ["postcss-preset-env", // 能解决大多数样式兼容性问题],},},},// 外部传入自定义 loader...preProcessorList,].filter(Boolean); // 筛选所有存在的loader
};

webpack.config.js

module.exports = {entry: "./src/main.js",output: {//... 其他配置},module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: getStyleLoaders(),},{test: /\.less$/,use: getStyleLoaders("less-loader"),},{test: /\.s[ac]ss$/,use: getStyleLoaders("sass-loader"),},//... 其他配置],},plugins: [//... 其他配置],mode: "production",
};

压缩 CSS 文件 （css-minimizer-webpack-plugin）

安装

npm i css-minimizer-webpack-plugin -D

“css-minimizer-webpack-plugin” 是一个用于 Webpack 的插件，它的作用是在 Webpack 构建过程中对 CSS 进行压缩和优化

配置 webpack.config.js

//... 其他配置
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");module.exports = {entry: "./src/main.js",output: {//... 其他配置},module: {rules: [//... 其他配置],},plugins: [//... 其他配置// css压缩new CssMinimizerPlugin(),],mode: "production",
};