当前位置：首页 > article >正文

【Webpack--012】提取单独的CSS文件压缩CSS文件

article 2024/11/15 11:35:10

🤓😍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文件loader
    MiniCssExtractPlugin.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",
};