【前端学习记录】webpack学习之mini-css-extract-plugin插件

前言

最近在学习尚硅谷的webpack5课程，看到mini-css-extract-plugin这个插件的时候，感觉很有帮助，之前都没有在css这方面深入思考过，课程中的一些记录写在下面

为什么需要优化CSS

Css 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式（先去加载js文件，再去创建style 标签来生成样式）

这样对于网站来说，会出现闪屏现象，用户体验不好（控制台newwork调慢时可以看到一个白屏，当js解析完成后，才会看到页面）

如何解决

我们应该是单独的 Css 文件，通过 link 标签加载性能才好。因此我们要将CSS给提取出来，以此来优化性能。

在webpack5中有一个插件可以解决这个问题，即mini-css-extract-plugin

MiniCssExtractPlugin

本插件会将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并且支持 CSS 和 SourceMaps 的按需加载。

本插件基于 webpack v5 的新特性构建，并且需要 webpack 5 才能正常工作。

与 extract-text-webpack-plugin 相比：

• 异步加载
• 没有重复的编译（性能）
• 更容易使用
• 特别针对 CSS 开发

使用方法

1. 安装

npm install --save-dev mini-css-extract-plugin

2. 使用

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  ...
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "stylus-loader"],
      },
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "../src"),
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    }),
  ],
  mode: "production",
};

打包

npm run build 

执行命令后打包文件夹下会生成一个css文件。再次刷新页面，发现无闪屏现象。

注意

1. 使用时将 style-loader 替换成 MiniCssExtractPlugin.loader（style-loader会创建style标签，没有必要）
2. 插件和loader都要进行替换才行