webpack 編寫自定義外掛程式方式簡單介紹

2021-10-20 18:15:57 字數 1940 閱讀 2269

使用 webpack api 中的 compiler 鉤子,可以在特定的時期進行操作

compiler 模組是 webpack 的支柱引擎,它通過 cli 或 node api 傳遞的所有選項,建立出乙個 compilation 例項。它擴充套件(extend)自 tapable 類,以便註冊和呼叫外掛程式。大多數面向使用者的外掛程式首,會先在 compiler 上註冊。

此模組會暴露在 webpack.compiler,可以直接通過這種方式使用。關於更多資訊,請檢視這個示例。

compiler支援可以監控檔案系統的 監聽(watching) 機制,並且在檔案修改時重新編譯。當處於監聽模式(watch mode)時,compiler 會觸發諸如watchrun,watchcloseinvalid等額外的事件。通常用於 開發環境 中使用,也常常會在webpack-dev-server這些工具的底層之下呼叫,由此開發人員無須每次都使用手動方式重新編譯。還可以通過 cli 進入監聽模式。

compiler.hooks.somehook.

tap(

...)

這裡我們使用 emit 鉤子 (生成資源到 output 目錄之前。)

remove-comments-plugin.js

class

removecommentsplugin

\/\s?/g,''

)// 替換後覆蓋掉原內容,根據 webpack 格式要求,暴露以下方法

// 暴露 source() 方法,返回新的內容

// 暴露 size() 方法,返回新內容大小

compilation.assets[name]=}

}})}

}module

.exports = removecommentsplugin

在 webpack.config.js 中引入外掛程式

webpack.config.js

const htmlwebpackplugin =

require

('html-webpack-plugin');

const

=require

('clean-webpack-plugin'

)const copywebpackplugin =

require

('copy-webpack-plugin');

const path =

require

('path');

const removecommentsplugin =

require

('./remove-comments-plugin'

)// 自定義外掛程式

module

.exports =

,module:,

],},

plugins:

[new

cleanwebpackplugin()

,new

htmlwebpackplugin()

,new

copywebpackplugin(,

// 'from' 我們сopy檔案所在的glob或路徑

,// 'to' 打包輸出路徑],

}),new

removecommentsplugin()

// 自定義外掛程式],

};

build 之後,可以看到注釋已經被清除

Webpack 自定義外掛程式

1,webpack背景知識 一款前端專案開發構建工具。或者用gulp。前後端分離的開發環境,解析不同的資源檔案,統一打包分包,按需載入,優化等。主要構成,入口 出口,loader和plugins model rules等配置,webpack自身提供外掛程式如 分析 壓縮 html provider等...

用jQuery 編寫自定義外掛程式

一 基本的 結構 方法一 name 外掛程式名 function var opts extend defaults,options 此處options為使用者設定的引數物件 使用者傳參 實現外掛程式的 bla bla bla jquery 方法二 function name2 function 其他...

自定義外掛程式

自定義外掛程式 建立自定義外掛程式1.建立工程 qt4 designer plugin 後續配置都使用預設值,這裡我們建立乙個 qhist 外掛程式。2.新建後,直接編譯,會產生如下錯誤 1 link fatal error lnk1181 cannot open input file qtdesi...