前言

在平時自己由零搭建項目時，雖然基礎配置都比較熟悉，比如配置 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 // 需要返回處理后的內容
}

這個導出的函數的工作就是獲得處理前的原內容，對原內容執(zhí)行處理后，返回處理后的內容。

替換字符串的 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',
 },
}

執(zhí)行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找
 },
 module: {
  rules: [
   {
    test: /\.js$/,
    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('框架', 'React框架').replace('JS', '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('框架', 'React框架').replace('JS', 'JavaScript')
 this.callback(null, handleContent)
}

自定義 loader 應用場景

在所有 function 外面加一層 try catch 代碼塊捕獲錯誤，避免手動繁瑣添加。
實現中英文替換：可以將文字用占位符如{{ title }}包裹，檢測到占位符則根據環(huán)境變量替換為中英文。

到此這篇關于如何編寫一個 Webpack Loader的實現的文章就介紹到這了,更多相關Webpack Loader實現內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論