webpack5 css 处理(提取 Css 成单独文件)MiniCssExtractPlugin

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

 

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

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

官网:

MiniCssExtractPlugin | webpack 中文文档webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。https://webpack.docschina.org/plugins/mini-css-extract-plugin

依赖命令

npm i mini-css-extract-plugin -D

 webpack.config.js

把所有rules数组中的style-loader换成MiniCssExtractPlugin.loader

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
module.exports = {
  plugins: [ new MiniCssExtractPlugin({
      // 针对css打包后放置指定路径
      filename: "static/css/main.css",
    }),],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

在控制台下network找到 Not throttling点击选择你想要的网络测试

 也可以看到样式是link方式引入