注意：这个和style引入只能选一种，多个css文件只合并输出一个css文件。（js中引入两个，只会有一个css文件输出）

使用方法

1.安装
注意这里也要安装css-loader

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

2.配置webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',//一样可以用于缓存,也可以写css/xxx.css给它创建一个文件夹
      chunkFilename: '[id].[contenthash].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '/public/path/to/',//这里是公共路径，例如background-image：url（）
            },
          },
          'css-loader',
        ],
      },
    ],
  },
};

路径相关问题(图片等)

https://awdr74100.github.io/2020-03-02-webpack-minicssextractplugin/

相关文档

https://webpack.js.org/plugins/mini-css-extract-plugin/#getting-started