编写 webpack Loader

loader 类型

  1. pre
  2. post
  3. normal
  4. inline 行内 loader

1、2、3 通过修改 loader 的 enforce 配置项

{
  test: /\.js/,
  use: "xx-loader",
  enforce: "pre"
};

执行顺序为:pre -> post -> normal -> inline

行内 loader

格式:

require("[前缀][loader 名称]![文件名称]")

require("-!inline-loader!./a.js");
前缀 意义
-! 不执行 pre 和 normal ,只有 inline 和 post
! 不执行 noraml,只有 pre + inline + post
!! 执行下 inline-loader

loader 执行过程

  • pitch 的顺序是配置的从上到下,从左到右
  • function 的顺序是配置的从下到上,从右到左
const loader = function (source) {
  // format source
  return source;
};
// 定义pitch过程
loader.pitch = function () {
  // do something
  return code | undefind;
};
  1. pitch loader 过程

    获取资源之前执行,可以阻断后面的 loader 执行。若返回不为空,则直接跳过后面 loader pitch 及他们的 normal 过程,以及获取资源的步骤

  2. normal

    获取资源之后正常执行 loader function

loader 执行顺序.png

参考

webpack loader 官方参考

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 对于webpack,一切皆模块。webpack 只能理解 JavaScript 和 JSON 文件,其他类型/后缀...
    AizawaSayo阅读 5,990评论 0 3
  • 前言 Loader(加载器) 是 webpack 的核心之一。它用于将不同类型的文件转换为 webpack 可识别...
    champyin阅读 422评论 0 1
  • 用过webpack的人都知道处理各种资源的时候要用到loader,比如babel-loader可以将ES6转化为E...
    sirjiangbo阅读 4,474评论 1 7
  • 一、loader 在webpack 中的作用 loader 用于对模块的源代码进行转换。 loader 可以使你在...
    Lyan_2ab3阅读 841评论 0 1
  • 安装前先npm初始化 本地服务 复制html 处理css 处理less 抽离css文件,通过link引入 压缩cs...
    陈观齐阅读 697评论 0 0