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 通过 前置, 行内, 普通, 后置 排序,并按此顺序使用。

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券