【webpack5】提取css成单独文件

将css提取成单独文件，通过link引入，性能更好。

将css打包到js文件中，在js文件加载时，会创建一个style标签来生成样式。也就是说，css打包在js文件中，只有js文件全部加载完成时才会显示样式。对于网站来说，会出现闪屏现象，用户体验不佳。（可以通过调低网速感受一下）

安装：

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

引入和配置：

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

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

将所有的style-loader改为MiniCssExtractPlugin.loader并且在插件中调用

npm run build后可以看到dist下多一个main.css，这就是抽取出来的css，里面有所有写的css文件

可以调用插件时指定输出路径

        new MiniCssExtractPlugin({
            filename:'static/css/main.css'
        }),

这样是通过link引入样式，html会自动引入打包生成的资源。