前言

在平時自己由零搭建專案時，雖然基礎配置都比較熟悉，比如配置 file-loader,url-loader,css-loader 等，配置不難，但究竟是怎麼起作用的呢，今天就來說說如何編寫一個 Webpack Loader。

Loader 作用

按我自己的簡單理解，loader 通常指打包的方案，即按什麼方式來處理打包，打包的時候它可以拿到模組原始碼，經過特定 loader 的轉換後返回新的結果。

比如 sass-loader 可以把 SCSS 程式碼轉換成 CSS 程式碼

編寫 Loader

保持功能單一

我們專案中可能會配置很多，但要記住，要保持一個 Loader 的功能單一，避免做多種功能，只需完成一種功能轉換即可。

所以如 less 檔案轉換成 css 檔案，也不是一步到位，而是 less-loader,css-loader,style-loader 幾個 loader 的鏈式呼叫才能完成轉換。

模組

因為 Webpack 本身是執行在 Node.js 之上的，一個 loader 其實就是一個 node 模組，這個模組匯出的是一個函式，即：

module.exports = function (source) {
 // source 為 compiler 傳遞給 Loader 的一個檔案的原內容
 // 處理...
 return source // 需要返回處理後的內容
}

這個匯出的函式的工作就是獲得處理前的原內容，對原內容執行處理後，返回處理後的內容。

替換字串的 loader

比如我們打包時，想要替換原始檔的字串，這時可以考慮使用 Loader，因為 loader 就是獲得原始檔內容然後對其進行處理，再返回。

比如 src 目錄下有三個檔案：

src/msg1.js

export const msg1 = '學習框架'

src/msg2.js

export const msg2 = '深入理解JS'

src/index.js

import { msg1 } from './msg1'
import { msg2 } from './msg2'

function print() {
 console.log(`輸出：${msg1},${msg2}`)
}

print()

做的事情則是把 msg1 和 msg2 兩個檔案匯入，然後輸出兩個字串。

我們要做的事也很簡單，把"框架"轉為"React 框架"， "JS"轉為"JavaScript"。

新建 src/loaders/replaceLoader.js檔案，

module.exports = function (source) {
 const handleContent = source.replace('框架','React框架').replace('JS','JavaScript')
 return handleContent
}

就這樣，loader 寫完了！！！

上面我們講到，source 是原始檔內容，如果列印的話，則是：

使用 Loader

接下來，我們要來使用它，在根目錄下新建檔案 webpack.config.js

const path = require('path')

module.exports = {
 mode: 'production',entry: './src/index.js',module: {
  rules: [
   {
    test: /\.js$/,use: './src/loaders/replaceLoader.js',},],output: {
  path: path.resolve(__dirname,'dist'),filename: '[name].js',}

執行npx webpack,檢視打包結果dist/main.js

(()=>{"use strict";console.log("輸出：學習React框架,深入理解JavaScript")})();

替換成功！

需要注意的是，use裡面填寫的 loader 是去node_modules目錄裡面找的，由於我們是自定義的 loader，所以不能直接寫use: 'replaceLoader'，但直接寫路徑的方式未免難看點，我們可以通過 webpack 來配置：

module.exports = {
 resolveLoader: {
  modules: ['node_modules','./src/loaders'],// node_modules找不到，就去./src/loaders找
 },use: 'replaceLoader',}

獲取 loader 的 options

寫完之後，讓我們來想想，其實就是寫一個功能函式嘛。

當然，這只是最簡單的例子，如果 loader 可以傳入引數呢，比如：

module: {
 rules: [
  {
   test: /\.js$/,use: {
    loader: 'replaceLoader',options: {
     params: 'replaceString',

這個時候可以使用this.query來獲取，通過this.query.params就能拿到，這裡需要注意的是，this 上下文是有用的，所以這個 loader 匯出函式不能是箭頭函式。

但 webpack 更推薦loader-utils模組來獲取，它提供了許多有用的工具，最常用的一種工具是獲取傳遞給 loader 的選項。

首先要安裝

npm i -D loader-utils

修改src/loaders/replaceLoader.js

const { getOptions } = require('loader-utils')

module.exports = function (source) {
 console.log(getOptions(this)) // { params: 'replaceString' }
 console.log(this.query.params) // replaceString
 const handleContent = source.replace('框架','JavaScript')
 return handleContent
}

這裡需要注意的是，getOptions(this)引數傳入的是 this，也就是說

列印結果：

{ params: 'replaceString' }
{ params: 'replaceString' }
{ params: 'replaceString' }

this.callback()

上面都是返回原來內容轉換後的內容，但有些場景下還需要返回其他東西比如 sourceMap

module.exports = function (source) {
 // 告訴 Webpack 返回的結果
 this.callback(null,source,sourceMaps)
}

另外也不需要 return 了，所以也可使用此 API 替代 return

const { getOptions } = require('loader-utils')

module.exports = function (source) {
 const handleContent = source.replace('框架','JavaScript')
 this.callback(null,handleContent)
}

自定義 loader 應用場景

在所有 function 外面加一層 try catch 程式碼塊捕獲錯誤，避免手動繁瑣新增。
實現中英文替換：可以將文字用佔位符如{{ title }}包裹，檢測到佔位符則根據環境變數替換為中英文。

到此這篇關於如何編寫一個 Webpack Loader的實現的文章就介紹到這了,更多相關Webpack Loader實現內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！