資訊專欄INFORMATION COLUMN
摘要：概述上一章講的是其他一些常用的小插件，這一章講的是自定義插件。打包并查看文件更多配置請查閱關(guān)于自定義章節(jié)資源源代碼
0x001 概述
上一章講的是其他一些常用的小插件，這一章講的是自定義插件。
0x002 環(huán)境配置$ mkdir 0x0016-other-plugin
$ cd 0x0016-other-plugin
$ npm init -y
$ vim webpack.config.js
// ./webpack.config.js
const path = require("path");
module.exports = {
entry : {
"index": ["./src/index.js"],
},
output: {
path : path.join(__dirname, "dist"),
filename: "[name].[chunkhash].js"
}
;
0x003 栗子1-最簡單的插件
編寫插件，這個插件會子安控制臺輸出一句hello plugin
// ./CustomPlugin.js
function UpdatePackageVersionPlugin(options) {
console.log("hello plugin")
}
CustomPlugin.prototype.apply = function (compiler) {
};
module.exports = CustomPlugin;
引用該插件
const path = require("path");
var CustomPlugin = require("./CustomPlugin")
module.exports = {
entry : {
"index": ["./src/index.js"],
},
output: {
path : path.join(__dirname, "dist"),
filename: "[name].bundle.js"
},
plugins: [
new CustomPlugin({options:true})
]
};
打包并查看控制臺
$ webpack
# ↓↓↓↓↓↓↓↓↓↓↓插件輸出
hello plugin
# ↑↑↑↑↑↑↑↑↑↑↑插件輸出
The compiler is starting to compile...
The compiler is starting a new compilation...
The compilation is starting to optimize files...
The compilation is going to emit files...
Hash: 8daa4edb5544a8f81c35
Version: webpack 3.8.1
Time: 58ms
Asset Size Chunks Chunk Names
index.bundle.js 2.6 kB 0 [emitted] index
[0] multi ./src/index.js 28 bytes {0} [built]
[2] ./src/index.js 14 bytes {0} [built]
0x004 栗子2-偷偷添加資源
修改插件，這個插件會讀取打包好的資源文件，并寫入到filelist.md文件，保存到dist目錄下。
function CustomPlugin(options) {
console.log("hello plugin")
}
CustomPlugin.prototype.apply = function (compiler) {
compiler.plugin("emit", function (compilation, callback) {
// Create a header string for the generated file:
var filelist = "In this build:
";
// Loop through all compiled assets,
// adding a new line item for each filename.
for (var filename in compilation.assets) {
filelist += ("- "+ filename +"
");
}
// Insert this list into the webpack build as a new file asset:
compilation.assets["filelist.md"] = {
source: function() {
return filelist;
},
size: function() {
return filelist.length;
}
};
callback();
})
};
module.exports = CustomPlugin;
打包并查看文件
$ webpack $ ls ./dist filelist.md index.bundle.js $ cat filelist.md // ./filelist.md In this build: - index.bundle.js
3. 更多配置請查閱[webpack關(guān)于自定義plugin章節(jié)][3] ### 0x005 資源 - [源代碼][4] [1]: https://segmentfault.com/a/1190000011976221 [2]: https://segmentfault.com/a/1190000011976221 [3]: https://webpack.js.org/contribute/writing-a-plugin/
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/89746.html
摘要：同時不能直接單純的指定輸出的文件名稱，比如，將會報錯，可以換成以下方式指定，或者其他類似方式。如果打包過程出現(xiàn)錯誤，比如語法錯誤，將會在控制臺以紅色文字顯示，并且在你修復(fù)之后會再次打包。 0x001 概述 其實我不知道怎么寫，所以決定就一塊一塊的寫點平常配置的過程，根據(jù)不同東西稍微分區(qū)一下就好了 0x002 初始化項目結(jié)構(gòu) $ mkdir webpack_study $ cd webp...
摘要：插件介紹就是提供全局變量啦全局定義栗子初始化項目安裝依賴包編寫添加插件，并定義調(diào)用打包并用瀏覽器打開查看控制臺全局定義自定義函數(shù)栗子添加定義添加文件調(diào)用打包并執(zhí)行輸出資源源代碼 0x001 概述 上一章講的是definePlugin的用法，和這一章依舊沒有任何關(guān)系，這一章講的時候providerPlugin。 0x002 插件介紹 就是提供全局變量啦 0x003 全局定義jquery栗...
摘要：生成多頁面修改配置自動插入標題第二個頁面打包并查看文件夾結(jié)構(gòu)這是一個模板文件這是一個模板文件此時的配置自動插入標題第二個頁面其他配置看這里資源源代碼 0x001 概述 上一章之后已經(jīng)可以自動刷新瀏覽器了，大大方便了我們的開發(fā)，這章開始講插件，第一個插件將會解決上一章節(jié)的一個問題，那就是index.html需要手動插入打包好的js，同時不會將index.html一起放到dist文件夾下的...
摘要：概述上一章講的是分離樣式，這一章講的是剩下的一些我常用的插件和上一章是沒有任何關(guān)系。環(huán)境搭建定義環(huán)境插件介紹這個插件用來定義環(huán)境變量的，直接定義在了下。安裝依賴添加資源修改配置打包其他更多配置請查閱關(guān)于資源源代碼 0x001 概述 上一章講的是分離樣式，這一章講的是剩下的一些我常用的插件,和上一章是沒有任何關(guān)系。 0x002 環(huán)境搭建 $ mkdir 0x0016-other-plug...
摘要：注意該插件是簡單的字符串替換，所以如果是定義常量最好使用包裹要替換的內(nèi)容，或者使用轉(zhuǎn)化，否則會變成代碼直接插入，比如版本號這樣替換的時候就會變成而不會變成導(dǎo)致錯誤的數(shù)據(jù)格式。 0x001 概述 上一章講的是js壓縮混淆，和這一章沒有半毛錢關(guān)系，這章講的是DefinePlugin，一個好像沒有用，但其實很好用的一個插件，我很喜歡，嘿嘿嘿！ 0x002 插件介紹 說白了，這是一個簡單的字符...
閱讀 3061·2021-11-25 09:43
閱讀 1037·2021-11-24 10:22
閱讀 1367·2021-09-22 15:26
閱讀 694·2019-08-30 15:44
閱讀 2471·2019-08-29 16:33
閱讀 3709·2019-08-26 18:42
閱讀 921·2019-08-23 18:07
閱讀 1841·2019-08-23 17:55
