前言

在平時(shí)自己由零搭建項(xiàng)目時(shí)，雖然基礎(chǔ)配置都比較熟悉，比如配置 file-loader, url-loader, css-loader 等，配置不難，但究竟是怎么起作用的呢，今天就來(lái)說(shuō)說(shuō)如何編寫(xiě)一個(gè) Webpack Loader。

Loader 作用

按我自己的簡(jiǎn)單理解，loader 通常指打包的方案，即按什么方式來(lái)處理打包，打包的時(shí)候它可以拿到模塊源代碼，經(jīng)過(guò)特定 loader 的轉(zhuǎn)換后返回新的結(jié)果。

比如 sass-loader 可以把 SCSS 代碼轉(zhuǎn)換成 CSS 代碼

編寫(xiě) Loader

保持功能單一

我們項(xiàng)目中可能會(huì)配置很多，但要記住，要保持一個(gè) Loader 的功能單一，避免做多種功能，只需完成一種功能轉(zhuǎn)換即可。

所以如 less 文件轉(zhuǎn)換成 css 文件，也不是一步到位，而是 less-loader, css-loader, style-loader 幾個(gè) loader 的鏈?zhǔn)秸{(diào)用才能完成轉(zhuǎn)換。

模塊

因?yàn)?Webpack 本身是運(yùn)行在 Node.js 之上的，一個(gè) loader 其實(shí)就是一個(gè) node 模塊，這個(gè)模塊導(dǎo)出的是一個(gè)函數(shù)，即：

module.exports = function (source) {
 // source 為 compiler 傳遞給 Loader 的一個(gè)文件的原內(nèi)容
 // 處理...
 return source // 需要返回處理后的內(nèi)容
}

這個(gè)導(dǎo)出的函數(shù)的工作就是獲得處理前的原內(nèi)容，對(duì)原內(nèi)容執(zhí)行處理后，返回處理后的內(nèi)容。

替換字符串的 loader

比如我們打包時(shí)，想要替換源文件的字符串，這時(shí)可以考慮使用 Loader，因?yàn)?loader 就是獲得源文件內(nèi)容然后對(duì)其進(jìn)行處理，再返回。

比如 src 目錄下有三個(gè)文件：

src/msg1.js

export const msg1 = '學(xué)習(xí)框架'

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 兩個(gè)文件導(dǎo)入，然后輸出兩個(gè)字符串。

我們要做的事也很簡(jiǎn)單，把"框架"轉(zhuǎn)為"React 框架"， "JS"轉(zhuǎn)為"JavaScript"。

新建 src/loaders/replaceLoader.js文件，

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

就這樣，loader 寫(xiě)完了?。。?/p>

上面我們講到，source 是源文件內(nèi)容，如果打印的話，則是：

使用 Loader

接下來(lái)，我們要來(lái)使用它，在根目錄下新建文件 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, 查看打包結(jié)果dist/main.js

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

替換成功！

需要注意的是，use里面填寫(xiě)的 loader 是去node_modules目錄里面找的，由于我們是自定義的 loader，所以不能直接寫(xiě)use: 'replaceLoader'，但直接寫(xiě)路徑的方式未免難看點(diǎn)，我們可以通過(guò) webpack 來(lái)配置：

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

獲取 loader 的 options

寫(xiě)完之后，讓我們來(lái)想想，其實(shí)就是寫(xiě)一個(gè)功能函數(shù)嘛。

當(dāng)然，這只是最簡(jiǎn)單的例子，如果 loader 可以傳入?yún)?shù)呢，比如：

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

這個(gè)時(shí)候可以使用this.query來(lái)獲取，通過(guò)this.query.params就能拿到，這里需要注意的是，this 上下文是有用的，所以這個(gè) loader 導(dǎo)出函數(shù)不能是箭頭函數(shù)。

但 webpack 更推薦loader-utils模塊來(lái)獲取，它提供了許多有用的工具，最常用的一種工具是獲取傳遞給 loader 的選項(xiàng)。

首先要安裝

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)參數(shù)傳入的是 this，也就是說(shuō)

打印結(jié)果：

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

this.callback()

上面都是返回原來(lái)內(nèi)容轉(zhuǎn)換后的內(nèi)容，但有些場(chǎng)景下還需要返回其他東西比如 sourceMap

module.exports = function (source) {
 // 告訴 Webpack 返回的結(jié)果
 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 應(yīng)用場(chǎng)景

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

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

最新評(píng)論