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

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

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

1.編寫入門級loader

我在之前的文章中，已經(jīng)把webpack基礎(chǔ)的內(nèi)容基本上都過了一遍，現(xiàn)在開始準備復(fù)習(xí)更高級的webpack知識了，首先從loader開始。

首先初始化一個項目

npm init

然后安裝依賴

cnpm install -D webpack webpack-cli

創(chuàng)建一個src目錄，里面創(chuàng)建一個index.js

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

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

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

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

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

這樣我們打包后發(fā)現(xiàn)，world已經(jīng)被替換成mark了，這樣我們就實現(xiàn)了一個最簡單的loader。

2.給loader配置參數(shù)

loader中常?？梢耘渲靡恍﹨?shù)，那么我們?nèi)绻肱渲脜?shù)，要怎么做呢？

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

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

cnpm install --save-dev loader-utils

這樣打包的結(jié)果也是我們傳入的參數(shù)。

3.this.callback

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

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

第一個參數(shù)是錯誤，第二個是結(jié)果，第三個是sourcemap，第四個可以是任何內(nèi)容（比如元數(shù)據(jù)）

4. this.async

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

當要使用異步的時候，需要先把callback變?yōu)閠his.callback，然后再返回結(jié)果（和this.callback一樣）。

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

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

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。