摘要:把他設置為以在其他之前或之后進行處理。基于布爾值的字段可用于進一步進行約束不匹配給定條件參見表示接受的值。同時匹配一系列條件。將此添加到你的配置即可檢查其中的數據流,而不必在中插入。
原文鏈接:https://survivejs.com/webpack...
翻譯計劃:https://segmentfault.com/a/11...附言:因為發現書中一些內容多帶帶放出來會比較尷尬,所以會跳過部分章節,當然完整版會全部翻譯,已經正在研究原版的網站搭建工程了
Webpack 提供了多種配置模塊 loader 的方法。 Webpack 2 開始通過引入 use 字段,簡化了 loader 使用。在這里使用絕對路徑是一個好主意,因為它們允許你在不影響構建的情況下移動配置。
另一種方法是設置 context 字段,因為這會產生類似的效果并影響 entry 和 loader 的路徑解析。但是它對輸出沒有影響,你仍然需要使用絕對路徑或 /。
即使你設置了 include 或 exclude 規則,從 node_modules 加載的包仍然可以正常工作,因為它們已經被編譯為開箱即用的代碼。如果它們沒這么做,那么你必須應用 Consuming Packages 章節中涵蓋的技術。
T> include/exclude 在處理 node_modules 問題時非常方便,因為當你將 JavaScript 文件導入項目時,webpack 會默認處理并遍歷已安裝的包。為了讓 webpack 不處理 node_modules,你需要使用 exclude。其他文件類型不會遇到此問題。
剖析 LoaderWebpack 通過 loader 支持多種格式的文件。此外,它支持一些開箱即用的 JavaScript 模塊規范。文件格式不同,但思路都是一致的,你必須設置一個或多個 loader,并將它們與你的目錄結構連接起來。
{pagebreak}
下例中 webpack 通過 Babel 處理 JavaScript:
webpack.config.js
module.exports = { ... module: { rules: [ { // **Conditions** to match files using RegExp, function. test: /.js$/, // **Restrictions** // Restrict matching to a directory. This // also accepts an array of paths or a function. // The same applies to `exclude`. include: path.join(__dirname, "app"), exclude(path) { // You can perform more complicated checks as well. return path.match(/node_modules/); }, // **Actions** to apply loaders to the matched files. use: "babel-loader", }, ], }, };
T> 如果你對 RegExp 的匹配不熟悉,可以使用在線工具,例如 regex101,RegExr 或 Regexper。
Loader 的運算順序一定要記住 loader 總是從右到左,從下到上(拆開寫的時候)進行運算的。把它看成函數比較容易理解所謂“從右到左運行”。你可以把 use: ["style-loader", "css-loader"] 看作 style(css(input))。
要查看規則,請看以下示例:
{ test: /.css$/, use: ["style-loader", "css-loader"], },
根據從右到左的規則,可以等效拆分為:
{ test: /.css$/, use: "style-loader", }, { test: /.css$/, use: "css-loader", },強制執行順序
盡管可以使用上述規則配置,但是也可以強制在常規規則之前或之后應用特定規則。enforce 字段在這里可以派上用場。把他設置為 pre or post 以在其他 loader 之前或之后進行處理。
Lint 是一個很好的例子,因為 Lint 必須先于任何其他行為。enforce: "post" 倒是很少用到,這多是你想對構建結果進行檢查時使用的。
{pagebreak}
基本語法如下:
{ // Conditions test: /.js$/, enforce: "pre", // "post" too // Actions use: "eslint-loader", },
如果你可以保證 test 中的 loader 順序無誤,那么可以不使用 enforce。不過使用 enforce 方便你把不同步驟的 loader 分離開來,更容易組織。
Loader 的傳參可通過 query 把參數傳到 loader:
{ // Conditions test: /.js$/, include: PATHS.app, // Actions use: "babel-loader?presets[]=env", },
這種配置風格也適用于 entry 和 import,webpack 會處理他們。在某些個別情況下,這個寫法能派上用場,但通常情況下最好使用以下更具可讀性的方案。
{pagebreak}
傳入對象到 use:
{ // Conditions test: /.js$/, include: PATHS.app, // Actions use: { loader: "babel-loader", options: { presets: ["env"], }, }, },
如果你想使用多個 loader,你可以將一個對象數組傳遞給 use:
{ test: /.js$/, include: PATHS.app, use: [ { loader: "babel-loader", options: { presets: ["env"], }, }, // Add more loaders here ], },
{pagebreak}
使用函數在 use 字段添加分支本書中,你在更高級別上進行環境配置。實現類似結果的另一個選擇是在 use 處使用分支,因為 webpack 的 loader 定義接受函數作為參數,你可以通過此函數區分環境:
{ test: /.css$/, // `resource` refers to the resource path matched. // `resourceQuery` contains possible query passed to it // `issuer` tells about match context path use: ({ resource, resourceQuery, issuer }) => { // You have to return something falsy, object, or a // string (i.e., "style-loader") from here. // // Returning an array fails! Nest rules instead. if (env === "development") { return { use: { loader: "css-loader", // css-loader first rules: [ "style-loader", // style-loader after ], }, }; } }, },
用心感受,這是組合配置的另一種手段。
內聯式定義盡管配置級 loader 定義更可取,但可以內聯編寫 loader 定義:
// Process foo.png through url-loader and other // possible matches. import "url-loader!./foo.png"; // Override possible higher level match completely import "!!url-loader!./bar.png";
這種方法的問題在你的源代碼會與 webpack 耦合。相同的機制還適用于 entry:
{ entry: { app: "babel-loader!./app", }, },匹配文件的備選方法
test 結合 include 或 exclude 是匹配文件的最常用方法。這些字段接受以下數據類型:
test——匹配 RegExp,字符串,函數,對象或數組。
include——同上。
exclude——同上,輸出與 include 相反。
resource: /inline/——匹配包含查詢內容的資源路徑。示例:/path/foo.inline.js, /path/bar.png?inline。
issuer: /bar.js/——匹配從某處請求的資源。示例:如果 /path/foo.png 從 /path/bar.js 請求,那么 /path/foo.png 將匹配。
resourcePath: /inline/——匹配包含查詢內容的資源路徑(不包括 query)。示例:/path/foo.inline.png。
resourceQuery: /inline/——匹配包含查詢內容的 query(不包括 query)。示例:/path/foo.png?inline。
基于布爾值的字段可用于進一步進行約束:
Boolean based fields can be used to constrain these matchers further:
not——不匹配給定條件(參見test表示接受的值)。
and——同時匹配一系列條件。
or——與數組中其中一個條件匹配。
基于 resourceQuery 加載oneOf 字段可以根據資源相關匹配將 webpack 路由到特定的 loader:
{ test: /.png$/, oneOf: [ { resourceQuery: /inline/, use: "url-loader", }, { resourceQuery: /external/, use: "file-loader", }, ], },
如果你需要在文件名中查詢,應該使用 resourcePath 而不是 resourceQuery。
{pagebreak}
基于 issuer 加載issuer 基于資源的導入位置進行操作。以下示例改編自 css-loader issue 287,style-loader 將應用于 JavaScript 導入的 CSS 文件:
{ test: /.css$/, rules: [ { issuer: /.js$/, use: "style-loader", }, { use: "css-loader", }, ], },
另一種方法結合了 issuer 和 not:
{ test: /.css$/, rules: [ // CSS imported from other modules is added to the DOM { issuer: { not: /.css$/ }, use: "style-loader", }, // Apply css-loader against CSS imports to return CSS { use: "css-loader", }, ], }了解 loader 行為
通過觀察 loader 行為可以更深入地理解它們。 loader-runner 允許你在沒有 webpack 的情況下多帶帶運行它們。Webpack 在底層也是使用此軟件包,Extending with Loaders 章節將會詳細介紹它。
inspect-loader 可以監視 loader 之間傳遞的內容。將此 loader 添加到你的配置即可檢查其中的數據流,而不必在 node_modules 中插入 console.log。
總結Webpack 提供了多種設置 loader 的方法,但在 webpack 4 中用好 use 就足夠了。注意 loader 的處理順序,這是很多常見的問題來源。
回顧一下:
Loaders 決定了 webpack 的模塊解析機制匹配到文件時應該作何處理。
loader 定義包括用于匹配的條件(conditions),以及匹配成功需要進行的動作(actions)。
Webpack 2 引入了use字段。它將以前的 loader 和 loaders 字段結合到了一起。
Webpack 4 提供了多種匹配和改變 loader 行為的方法。例如,你可以在匹配 loader 后進行 resource query 匹配,指引 loader 進行特定操作。
在下一章中,你將學習使用 webpack 加載圖片。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/108420.html
摘要:資源哈希編碼使用可以為每個包的名稱注入一個哈希值例如,,以便在版本更新后使客戶端上舊版本的包無效重新下載。如此受人喜愛的原因之一是熱模塊更換。可以為文件名生成哈希值,在內容更改時,可以作廢瀏覽器緩存中上個版本的包。 原文鏈接:https://survivejs.com/webpack...翻譯計劃:https://segmentfault.com/a/11... 涉及到的未翻譯單詞 ...
摘要:名稱后自動自動補全的功能將被移除在配置時,官方不再允許省略擴展名,的配置寫法上將逐步趨于嚴謹。使用自定義參數作為配置項傳入方式將做調整如果你隨意將自定義參數通過傳入到配置項中,如你會發現這將不會被允許,的執行將會遵循更為嚴格的標準。 歷時多日,webpack2.2正式版終于趕在年前發布了,此次更新相對于1.X版本有了諸多的升級優化改進,筆者也在第一時間查閱了官方的文檔,整理和翻譯了由w...
摘要:爭取早日能完全拋棄掉中文文檔,最終可以翻譯英文文檔,輸出英文文檔。待續相關文章入門學習手記一入門學習手記二入門學習手記三入門學習手記四 本人微信公眾號:前端修煉之路,歡迎關注。 showImg(https://segmentfault.com/img/bVbk0kO?w=1150&h=599); 之前用過gulp、grunt,但是一直沒有學習過webpack。這兩天剛好有時間,學習了下...
摘要:這就需要把文件單獨拎出來,那需要一個插件來配合才能完成版本需要以上,低版本請使用使用步驟安裝在里引入模塊寫入陳學輝文件目錄會放入里寫入代替執行命令后可以看到目錄里已經多了一個文件夾,這個文件夾里放了一個文件。 概念 在webpack中任何一個東西都稱為模塊,js就不用說了。一個css文件,一張圖片、一個less文件都是一個模塊,都能用導入模塊的語法(commonjs的require,E...
摘要:的使用為什么使用前端需要工程化工程化的概念小作坊流水線流水線的特點自動化,模塊化性能優化自動化就是命令行操作,一行命令實現多個功能,例如自動監聽變化,自動翻譯源代碼到打包代碼庫里面文件復雜多樣文件多變化快將各種文件集 webpack的使用 為什么使用webpack 1.前端需要工程化 工程化的概念: 小作坊 -> 流水線流水線的特點:自動化,模塊化、性能優化 自動化就是命令行操作,一行...
閱讀 1303·2021-11-11 10:57
閱讀 3717·2021-09-07 10:10
閱讀 3442·2021-08-03 14:03
閱讀 3067·2019-08-30 13:45
閱讀 681·2019-08-29 11:19
閱讀 1038·2019-08-28 18:07
閱讀 3099·2019-08-26 13:55
閱讀 809·2019-08-26 12:17