1.style-loader 或 mini-css-extract-plugin : style-loader动态创建style标签，将css插入head中。 mini-css-extract-plugin 提取js文件中import的 样式文件单独打包成css文件，结合html-webpack-plugin 以 link 标签插入html中。
    注：
    mini-css-extract-plugin 不支持HMR，若修改了样式文件，是不能即时在浏览器中显示出来的，需要手动刷新页面。
    例：

    1. const getCssLoaders = (importLoaders) => [
    2.   isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
    3.   {
    4.     loader: 'css-loader',
    5.     options: {
    6.       modules: {
    7.         auto: /\.module\.\w+$/i,
    8.         localIdentName: '_[local]-[hash:base64:6]'
    9.       },
    10.       sourceMap: isDevelopment,
    11.       importLoaders
    12.     }
    13.   },
    14.   {
    15.     loader: 'postcss-loader'
    16.   }
    17. ]

    注：
    mini-css-extract-plugin 的使用需要loder与plugin结合使用，抽离css代码

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

    2.css-loader: 负责处理 css 样式文件中 @import 等语句，分析出各个css文件之间的关系，把各个css文件合并成一段css，是否开启css module 功能
    3.postcss-loader: 自动生成浏览器兼容性前缀,样式的浏览器兼容前缀，h5 适配方案设置
    4.less-loader: 负责处理编译 .less 文件,将其转为 css
    5.style-resource-loader : 导入css预处理器的公共样式文件的变量。比如：variables,mixins,functions等，避免了在每个样式文件中手动 @import 导入。 或者也可以通过 less-loader , 还提供了另外一种使用全局变量的方式，即在options.globalVars里进行配置