webpack如何将css文件单独抽离

css文件插到html的方式有以下两种：

1. 全部插入到style中

首先用css-loader将css文件变成commonjs模块加载到js中，里面的内容是样式字符串，然后用style-loader创建style标签，将js中样式资源插入进行，添加到head中生效。

{
  test: /\.scss$/,
  use: [
    //创建style标签，将js中样式资源插入进行，添加到head中生效
    "style-loader",
    //将css文件变成commonjs模块加载到js中，里面的内容是样式字符串
    "css-loader"
  ]
}

2. 生成css文件通过link标签引入

需要用到mini-css-extract-plugin这个插件，它的作用就是将css抽离成单独文件并引入，具体配置方式如下：
第一步：引入这个插件：

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

第二步：在plugins中实例化MiniCssExtractPlugin，这里filename表示生成的css文件放到打包目录下的css文件夹下，并且文件名为index.css。

new MiniCssExtractPlugin({
  filename: "./css/index.css",
})

第三步：用MiniCssExtractPlugin.loader取代style-loader，为了将css单独抽离出来成单独文件。

{
  test: /\.css$/,
  use: [
    MiniCssExtractPlugin.loader,
    "css-loader"
  ],
}