美文网首页
webpack loader 执行顺序

webpack loader 执行顺序

作者: MoonBall | 来源:发表于2017-05-06 02:45 被阅读1876次

    在 webpack 中每个资源都会有个 request,这个 request 类似于在 require('babel-loader?plugins[]=transform-es2015-arrow-functions!!script-loader!./a'); 中的 babel-loader?plugins[]=transform-es2015-arrow-functions!!script-loader!./a,只是它会把每个 module 都 require.resolve 一下成绝对路径。参考 loader-api/this.request。loader 的执行顺序完全是按照 request 的顺序来执行的,先从左到右 pitch,然后再从右到左 transform。所以 loader 的执行顺序关键就是看 request 是如何生成的。

    1. 在配置文件 module.rules 中定义的 loader

    module.rules 会先对该资源文件的所有符合条件的 loader 进行排序(按照 enforce,post loader 在最左边,pre loader 在最右边),然后转换成 request 的格式。有一点注意的是:对于 enforce: 'post' 的 loader 会在前面加上 !!,而 enforce: 'pre' 的 loader 会在前面加上 -!,其他的都是加 ! 了。

    2. 在 require 中定义 loader

    该方式 定义的顺序是确定的,webpack 不会改变该顺序,就算使用 !!-! 也没用的,!!-! 会被替换成 !。webpack 仅仅会去 require.resolve 每个 module,然后转换成 request。

    3. 同时在配置文件 和 require 中定义的 loader

    结果为:
    在 require 中定义的 loader 的 request +
    ** 在配置文件 module.rules 中定义的 loader 的 request** +
    resource

    相关文章

      网友评论

          本文标题:webpack loader 执行顺序

          本文链接:https://www.haomeiwen.com/subject/hsketxtx.html