wepack中loader的分类

loader种类

loader分为四类

分别是：

1. 前置 pre
2. 行内 inline
3. 普通 normal
4. 后置 post

Rule.enforce

enforce 属性会影响 loader 种类。不论是普通的，前置的，后置的 loader。

可能的值有："pre" | "post"

module: {
    rules: [
      {
        test: /\.less$/,
        use: 'less-loader',
        enforce: 'pre'
      },
     {
        test: /\.less$/,
        use: 'css-loader'
      },
     {
        test: /\.less$/,
        use: 'style-loader',
        enforce: 'post'
      }
    ]
  },

指定 loader 种类。没有值表示是普通 loader。

行内loader

还有一个额外的种类"行内 loader"，loader 被应用在 import/require 行内。

基本写法

使用 ! 将资源中的 loader 分开。每个部分都会相对于当前目录解析。

import Styles from 'style-loader!css-loader?modules!./styles.css';

选项可以传递查询参数，例如 ?key=value&foo=bar，或者一个 JSON 对象，例如 ?{"key":"value","foo":"bar"}。

共有3种前缀

所有普通 loader 可以通过在请求中加上 ! 前缀来忽略（覆盖）。

require('!inline-loader!./a.js')

所有普通和前置 loader 可以通过在请求中加上 -! 前缀来忽略（覆盖）。

require('-!inline-loader!./a.js')

所有普通，后置和前置 loader 可以通过在请求中加上 !! 前缀来忽略（覆盖）。

require('!!inline-loader!./a.js')

loader的执行顺序

所有 loader 通过 前置, 行内, 普通, 后置 排序，并按此顺序使用。

微信扫一扫，关注前端精髓