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"
  ]
}

1.生成 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"
  ],
}

如果想在 style 资源中注入内容，导入 css / sass / scss / less / stylus 这些内容。可以安装 style-resources-loader。

module.exports = {
    // ...
    module: {
        rules: [{
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader', {
                loader: 'style-resources-loader',
                options: {
                    patterns: [
                        path.resolve(__dirname, 'path/to/scss/variables/*.scss'),
                        path.resolve(__dirname, 'path/to/scss/mixins/*.scss'),
                    ]
                }
            }]
        }]
    },
    // ...
}

主要作用是导入一些公共的样式文件，比如：variables / mixins / functions，避免在每个样式文件中手动的 @import 导入。