webpack實戰之編寫一個簡易的loader和plugin

• 🔔序言
• 🎵一、如何編寫一個Loader
• • 1. 碎碎念
  • 2. 項目結構
  • 3. 業務代碼編寫
  • • （1）入口文件代碼
    • （2）編寫loader
    • （3）引用loader
    • （4）在loader里面做一些異步的操作
    • （5）loader路徑自定義
• 🎶二、如何編寫一個Plugin
• • 1. 碎碎念
  • 2. 項目結構
  • 3. 業務代碼編寫
  • • （1）入口文件代碼
    • （2）編寫plugin
    • （3）引用plugin
• 💹三、結束語
• 🐣彩蛋 One More Thing
• • （：往期推薦
  • （：番外篇

🔔序言

對于 webpack 來說， loader 和 plugin 可以算是需求程度最為廣泛的配置項了。但是呢，單單止步于配置可能還不夠。如果我們自己有時候想要 diy 一個需求，但是 webpack 又沒有相關的 loader 和 plugin 。那這個時候我們可能就得開始造點輪子來供給自己使用了。

因此，在今天的文章當中，將帶領大家手寫一個簡易的 loader 和 plugin ，并學會如何在項目中運用自己所編寫的 loader 和 plugin 。

一起來學習吧~📢

🎵一、如何編寫一個Loader

1. 碎碎念

之前的文章中我們講到了關于 loader 的一些配置。那如果把那些引用的 loader 改為我們寫的 loader ，該怎么處理呢？

現在，我們來了解一下，如何手寫一個簡易的 loader ，并運用到我們的項目當中。

2. 項目結構

首先用一張圖，來看我們的項目結構。如下圖所示：

其中 loaders 文件夾下放置我們想要寫的 loader ，同時里面的 replaceLoader.js 文件放置我們即將要寫的 loader 的代碼邏輯。之后，index.js 文件是我們的入口文件，放置我們的業務邏輯。 webpack.config.js 文件放置關于 webpack 的相關配置，而 dist 文件夾內的內容，放置的是我們通過 webpack 打包后，生成的打包文件。

3. 業務代碼編寫

（1）入口文件代碼

現在，我們先來編寫入口文件 index.js 的代碼。具體代碼如下：

console.log('hello monday');

（2）編寫loader

入口文件的內容很簡單，我們想要達到的目的就是輸出 hello monday 這個語句。現在，我們來編寫 loader 的內容，已達到對入口文件 index.js 的內容進行修改。 replaceLoader.js 文件的代碼具體如下：

module.exports = function(source) {const result = source.replace('monday', 'mondaylab');this.callback(null, result); }

---

以上的代碼意思為，將入口文件 index.js 文件中的 monday 替換為 mondaylab 。這樣寫似乎沒啥問題，但是大家有沒有想過，我們有時候傳的屬性可能會很詭異，不一定每次都能像這樣以字符串的形式來替換。

所以，我們引用 webpack 官方推薦的 loadertils 這個工具，來解決這個問題。

第一步： 安裝 loader-utils 插件。具體命令如下：

npm install loader-utils --save-dev

第二步： 改造 loader 文件。接下來，我們對 replaceLoader.js 文件進行改造升級，具體代碼如下：

const loaderUtils = require('loader-utils');//用function的原因在于為了業務層可以調用this //source為引入文件的源代碼 module.exports = function(source) {//getOptions會自動地幫我們分析this.query,然后把參數的所有內容放在options里面去const options = loaderUtils.getOptions(this);const result = source.replace('monday', options.name);this.callback(null, result); }

大家可以看到，通過使用 loaderUtils 插件，間接地，調用 getOptions 方法，來自動的幫我們分析 this.query ，從而取到我們想要的內容。

值得注意的是，我們還需要再了解一下 this.callback 的內容。

一般情況下，如果我們接收到了源代碼 source ，那么現在我們只能對源代碼做處理。但是呢，有的時候，我們想要使用一些 sourceMap ，或者對源代碼分析好了之后，我們不僅想要返回源代碼，還要把 sourceMap 也帶回去。

因為我們 return 的時候只能 return 一個參數，其余的一些額外的內容就帶不出去了。這個時候呢，我們就需要 this.callback 來幫我們把 sourceMap 給帶出去。因此，一般用 this.callback 來返回內容。

（3）引用loader

現在，我們在 webpack.config.js 中，來引入我們上面的 loader 。具體配置如下：

const path = require('path');module.exports = {mode: 'development',entry: {main: './src/index.js'},module: {rules: [{test: /\.js/,use: [{loader: path.resolve(__dirname, './loaders/replaceLoader.js'),//上面的options.name中的nameoptions: {name: 'mondaylab'}} ]}]},output: {path: path.resolve(__dirname, 'dist'),filename: '[name].js' } }

通過以上方式，我們寫了一個簡易的 loader ，這個 loader 實現了將 monday 替換為 mondaylab 的功能。并且供我們在 webpack 中使用自己書寫的 loader 。

（4）在loader里面做一些異步的操作

好了現在，如果我們想要給 loader 做一些異步操作，該怎么實現呢？

在我們所寫的 loader 當中，加入異步操作，那么我們需要調用官方提供給我們的 this.async() 這個 API 來實現。現在，我們來改造一下 replaceLoader.js 文件的代碼。具體代碼如下：

const loaderUtils = require('loader-utils');module.exports = function(source) {const options = loaderUtils.getOptions(this);//調用this.async()這個API，來給異步代碼使用const callback = this.async();setTimeout(() => {const result = source.replace('monday', options.name);callback(null, result);}, 1000); }

通過這種方式，我們就可以在 loader 中編寫異步代碼，來達到我們想要的效果。

（5）loader路徑自定義

有一個很小的注意點就是，當我們在配置 webpack.config.js 文件中， loader 的路徑時，每回都要 path.resolve 去尋找路徑文件。文件少的時候還好，但如果遇到多文件的時候呢？豈不是會很麻煩。

所以，我們引用 resolveLoader 來簡化它。現在我們在 webpack.config.js 文件中進行改造。具體配置如下：

const path = require('path');module.exports = {// 先到node_modules中去找，找不到則去./loaders目錄下去找resolveLoader: {modules: ['node_modules', './loaders']},module: {rules: [{test: /\.js/,use: [{loader: 'replaceLoader'}]}]} }

通過配置 resolveLoader ，來對文件文件目錄進行查找，從而簡化了路徑內容。

🎶二、如何編寫一個Plugin

1. 碎碎念

在講解 plugin 之前，我們先來了解 loader 和 plugin 的區別。

當我們在源代碼里面，去引入一個新的 js 文件，或者是一個其他格式的文件時，這個時候我們可以借用 loader ，來幫我們處理我們引用的 loader 文件。 loader 的作用就在于，幫助我們處理引用的模塊。

而 plugin 呢，是當我們在做打包的時候，在某些具體時刻上，比如說，當我們打包結束之后，我們要生成一個 html 文件，這個時候，我們就可以使用一個 htmlWebpackPlugin 的插件。使用它之后，他就會在打包結束之后，幫我們生成對應的 html 文件。

再比如，我們要在打包之前，把 dist 目錄進行清空，這個時候我們就可以使用 cleanWebpackPlugin 來幫助我們做這件事情。

所以， plugin 插件，在什么時候生效呢？

它在我們打包過程中的某些時刻里，就是插件生效的場景。

plugin 的編寫相對于 loader 來說，會難一點點。但是呢，如果有看過 webpack 源碼的小伙伴們可能會知道， webpack 的一些底層原理都是依據 plugin 來進行編寫的。所以，我們還是有必要來學習一下 plugin 的編寫。

下面就帶領大家來編寫一個簡易的 plugin ~

2. 項目結構

對于 webpack 的 plugin 來說，它是是基于發布者訂閱的設計模式，也可以說是基于事件驅動來實現的。在這個事件驅動里，代碼之間的執行，是通過事件來進行驅動的。

接下來，我們就來寫一個簡易的 plugin 。

首先用一張圖，來看我們的項目結構。如下圖所示：

其中 plugins 文件夾下放置我們想要寫的 plugin ，同時里面的 copyright-webpack-plugin.js 文件放置我們即將要寫的 plugin 的代碼邏輯。之后，index.js 文件是我們的入口文件，放置我們的業務邏輯。 webpack.config.js 文件放置關于 webpack 的相關配置，而 dist 文件夾內的內容，放置的是我們通過 webpack 打包后，生成的打包文件。

3. 業務代碼編寫

（1）入口文件代碼

現在，我們先來編寫入口文件 index.js 的代碼。具體代碼如下：

console.log('hello monday');

（2）編寫plugin

現在，我們來編寫 plugin 的內容， copyright-webpack-plugin.js 文件的代碼具體如下：

class CopyrightWebpackPlugin {//編寫一個構造器constructor(options) {console.log(options)}apply(compiler) {//遇到同步時刻compiler.hooks.compile.tap('CopyrightWebpackPlugin',() => {console.log('compiler');});//遇到異步時刻//當要把代碼放到dist目錄之前，要走下面這個函數//Compilation存放打包的所有內容，Compilation.assets放置生成的內容compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin', (Compilation, cb) => {debugger;// 往代碼中增加一個文件，copyright.txtCompilation.assets['copyright.txt'] = {source: function() {return 'copyright by monday';},size: function() {return 19;}};cb();})} }module.exports = CopyrightWebpackPlugin;

上面的這個插件中想要實現的功能就是，獲取版權信息。

（3）引用plugin

現在，我們在 webpack.config.js 中，來引入我們上面的 plugin 。具體配置如下：

const path = require('path'); const CopyrightWebpackPlugin = require('./plugins/copyright-webpack-plugin');module.exports = {mode: 'development',entry: { main: './src/index.js'},plugins: [new CopyrightWebpackPlugin({name: 'monday'})],output: {path: path.resolve(__dirname, 'dist'),filename: '[name].js'} }

通過上述代碼，我們可以了解到，在（2）中，我們首先需要定義一個類，之后呢，在類中寫一個構造器和一個 apply() 方法來調用。然后呢，大家看到（3），通過 require 的方式，來進行 new 實例 ，實例化一個插件，從而在項目中使用這個插件。

最終，我們項目進行打包時，就會生成一個 dist 目錄，并且在目錄下增加一個 copyright.txt 文件，并且文件中的內容就是 copyright by monday 。

💹三、結束語

在上面的文章中，講解了關于loader和plugin的基本編寫思路，以及如何在項目中對他們進行運用，相信大家對這一塊內容有了基礎的認識。

到這里，loader和plugin的編寫講解就結束啦！希望對大家有幫助~

如文章有誤或有不理解的地方，歡迎小伙伴們評論區留言哦💬

本文代碼已上傳至公眾號，后臺回復關鍵詞 webpack 即可獲取~

🐣彩蛋 One More Thing

（：往期推薦

webpack入門核心知識👉不會webpack的前端可能是撿來的，萬字總結webpack的超入門核心知識

webpack入門進階知識👉webpack入門核心知識還看不過癮？速來圍觀萬字進階知識

webpack實戰案例配置👉萬字總結webpack實戰案例配置

（：番外篇

• 關注公眾號星期一研究室，第一時間關注優質文章，更多精選專欄待你解鎖~

• 如果這篇文章對你有用，記得留個腳印jio再走哦~

• 以上就是本文的全部內容！我們下期見！👋👋👋

總結

以上是生活随笔為你收集整理的webpack实战之手写一个loader和plugin的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。