在 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 的執(zhí)行順序完全是按照 request 的順序來執(zhí)行的勺像,先從左到右 pitch,然后再從右到左 transform炼吴。所以 loader 的執(zhí)行順序關(guān)鍵就是看 request 是如何生成的鹿鳖。
1. 在配置文件 module.rules 中定義的 loader
module.rules 會先對該資源文件的所有符合條件的 loader 進行排序(按照 enforce扁眯,post loader 在最左邊,pre loader 在最右邊)翅帜,然后轉(zhuǎn)換成 request 的格式姻檀。有一點注意的是:對于 enforce: 'post'
的 loader 會在前面加上 !!
,而 enforce: 'pre'
的 loader 會在前面加上 -!
涝滴,其他的都是加 !
了绣版。
2. 在 require 中定義 loader
該方式 定義的順序是確定的,webpack 不會改變該順序歼疮,就算使用 !!
和 -!
也沒用的杂抽,!!
和 -!
會被替換成 !
。webpack 僅僅會去 require.resolve 每個 module韩脏,然后轉(zhuǎn)換成 request缩麸。
3. 同時在配置文件 和 require 中定義的 loader
結(jié)果為:
在 require 中定義的 loader 的 request +
** 在配置文件 module.rules 中定義的 loader 的 request** +
resource