extract-text-webpack-plugin已经过时，如何实现将CSS文件单独抽离

打包之后，我们并不喜欢css和js混杂在一起，而是希望单独抽离出来，在加载html之前就加载css。

这时我们可以使用webpack的插件。

extract-text-webpack-plugin上次更新的时候还是4年前。

作者也提示说，已经过时了，我们应该使用MiniCssExtracPlugin。

MiniCssExtracPlugin基于Webpack5，我们需要用webpack5才能正常使用。

与 extract-text-webpack-plugin 相比：

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

使用它也是非常简单：

yarn add -D mini-css-extract-plugin

在某个js文件中导入，css文件

import "./style.css";

//webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

最终，我们就得到了单独的css文件。

而且在html加载之前，就引入了css文件。
（这个需要html-webpack-plugin的帮忙）