Loader 种类

关于 loader的种类, 可以通过rule.enforce来配置，如下

module.exports = {
  // ...
    module: {
    // ...
    // 从下往上, css-loader -> style-loader
    rules: [
      {
        test: /\.css$/,
        use: {
          loader: 'style-loader'
        },
        enforce:'pre'
      },
      {
        test: /\.css$/,
        use: {
          loader: 'css-loader'
        }
      }
    ]
  },
  // ...
}

此时，在普通 loader模式下css-loader将会在style-loader之后执行。即由之前的css-loader -> style-loader变成style-loader -> css-loader。

rule.enforce的参数: 'pre' 'post'

rule.enforce 的参数: pre, post

• pre Loader: 前置 loader
  • 配置: enforce: 'pre'
• normal Loader: 普通 loader
  • 配置: 默认
• inline Loader: 内联 loader
  • 在模块中指定使用的 loader 是内联 loader，例如 import '!style-loader!css-loader!less-loader?name=Rain120!./styles.less';
• post Loader: 后置 loader
  • 配置: enforce: 'post'

参考资料

图片获取地址