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

成都地區(qū)優(yōu)秀IDC服務(wù)器托管提供商(創(chuàng)新互聯(lián)公司).為客戶提供專業(yè)的四川電信機(jī)房托管,四川各地服務(wù)器托管,四川電信機(jī)房托管、多線服務(wù)器托管.托管咨詢專線：028-86922220

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

1.編寫入門級(jí)loader

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

首先初始化一個(gè)項(xiàng)目

npm init

然后安裝依賴

cnpm install -D webpack webpack-cli

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

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

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

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

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

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

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

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

loader中常常可以配置一些參數(shù)，那么我們?nèi)绻肱渲脜?shù)，要怎么做呢？

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

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

cnpm install --save-dev loader-utils

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

3.this.callback

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

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

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

4. this.async

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

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

這樣再打包就不會(huì)有任何問題。

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

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

本文標(biāo)題：webpack4之如何編寫loader的方法步驟
URL標(biāo)題：http://vcdvsql.cn/article4/pepeie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)、網(wǎng)站策劃、、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)