在 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