以前學習過webpack3的知識，可是webpack4升級後仍是有不少變更的，因此此次從新整理一下webpack4的知識點，方便之後複習。node

此次學習webpack4不單單要會配置，記住核心API，最好還要理解一下webpack更深層次的知識，好比打包原理等等，因此可能會省略一些比較基礎的內容，可是但願我能夠經過這次學習掌握webpack，更好地應對之後的工做。webpack

1.編寫入門級loader

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

首先初始化一個項目npm

npm init
複製代碼

而後安裝依賴bash

cnpm install -D webpack webpack-cli
複製代碼

建立一個src目錄，裏面建立一個index.js異步

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

若是此時，咱們有個需求，中打包過程當中，須要把world替換成mark，咱們就能夠藉助loader來實現。首先在src同級目錄新建一個loader文件夾，裏面新建一個replaceLoader.js。函數

replaceLoader.js須要導出一個函數，注意：這個函數不能是箭頭函數，由於webpack調用loader的時候會對this作一些變動，上面有一些方法，若是使用箭頭函數，this指向就會有問題，沒有辦法調用this上的一些方法。post

函數能夠接受一個參數，參數是咱們源代碼的內容，因此能夠對source進行操做後，return source，就能夠改變源代碼了。學習

而後使用咱們本身寫的loader，use就不填寫loader名稱了，須要寫咱們編寫的loader的路徑。

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

2.給loader配置參數

loader中經常能夠配置一些參數，那麼咱們若是想配置參數，要怎麼作呢？

此時在replaceLoader中，能夠經過this.query訪問到參數。

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

cnpm install --save-dev loader-utils
複製代碼

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

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

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

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

在loader中，若是咱們直接調用setTimeout，就會報錯，那麼若是咱們想進行異步操做要怎麼作呢？

當要使用異步的時候，須要先把callback變爲this.callback，而後再返回結果（和this.callback同樣）。

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

額外知識點：咱們如今配置loader的時候，須要使用path.resolve，有沒有什麼方法能夠像其餘loader同樣引用呢？

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