webpack4之如何編寫loader的方法步驟

之前學習過webpack3的知識，但是webpack4升級后還是有很多變動的，所以這次重新整理一下webpack4的知識點，方便以后復習。

這次學習webpack4不僅僅要會配置，記住核心API，最好還要理解一下webpack更深層次的知識，比如打包原理等等，所以可能會省略一些比較基礎的內容，但是希望我可以通過此次學習掌握webpack，更好地應對以后的工作。

1.編寫入門級loader

我在之前的文章中，已經把webpack基礎的內容基本上都過了一遍，現在開始準備復習更高級的webpack知識了，首先從loader開始。

首先初始化一個項目

npm init

然后安裝依賴

cnpm install -D webpack webpack-cli

創建一個src目錄，里面創建一個index.js

新建一個webpack.config.js，寫入最基本的配置

如果此時，我們有個需求，中打包過程中，需要把world替換成mark，我們就可以借助loader來實現。首先在src同級目錄新建一個loader文件夾，里面新建一個replaceLoader.js。

replaceLoader.js需要導出一個函數，注意：這個函數不能是箭頭函數，因為webpack調用loader的時候會對this做一些變更，上面有一些方法，如果使用箭頭函數，this指向就會有問題，沒有辦法調用this上的一些方法。

函數可以接受一個參數，參數是我們源代碼的內容，所以可以對source進行操作后，return source，就可以改變源代碼了。

然后使用我們自己寫的loader，use就不填寫loader名稱了，需要寫我們編寫的loader的路徑。

這樣我們打包后發現，world已經被替換成mark了，這樣我們就實現了一個最簡單的loader。

2.給loader配置參數

loader中常常可以配置一些參數，那么我們如果想配置參數，要怎么做呢？

此時在replaceLoader中，可以通過this.query訪問到參數。

這樣打包后，結果就會替換成我們的參數，但是官方推薦我們使用loader-utils來傳參。

cnpm install --save-dev loader-utils

這樣打包的結果也是我們傳入的參數。

3.this.callback

有時候我們不止要return一個resource，還可能要返回多個結果，就需要用到callback。

this.callback(
 err: Error | null,
 content: string | Buffer,
 sourceMap?: SourceMap,
 meta?: any
);

第一個參數是錯誤，第二個是結果，第三個是sourcemap，第四個可以是任何內容（比如元數據）

4. this.async

在loader中，如果我們直接調用setTimeout，就會報錯，那么如果我們想進行異步操作要怎么做呢？

當要使用異步的時候，需要先把callback變為this.callback，然后再返回結果（和this.callback一樣）。

這樣再打包就不會有任何問題。

額外知識點：我們現在配置loader的時候，需要使用path.resolve，有沒有什么方法可以像其他loader一樣引用呢？

這樣只寫loader名稱，webpack就會先到node_modules里面找，找不到就去當前目錄下的loaders中去找。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。