webpack loader 执行顺序

在 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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容