資訊專欄INFORMATION COLUMN
摘要：注意該插件是簡(jiǎn)單的字符串替換，所以如果是定義常量最好使用包裹要替換的內(nèi)容，或者使用轉(zhuǎn)化，否則會(huì)變成代碼直接插入，比如版本號(hào)這樣替換的時(shí)候就會(huì)變成而不會(huì)變成導(dǎo)致錯(cuò)誤的數(shù)據(jù)格式。
0x001 概述
上一章講的是js壓縮混淆，和這一章沒有半毛錢關(guān)系，這章講的是DefinePlugin，一個(gè)好像沒有用，但其實(shí)很好用的一個(gè)插件，我很喜歡，嘿嘿嘿！
0x002 插件介紹說白了，這是一個(gè)簡(jiǎn)單的字符串替換插件，將我們所有經(jīng)過webpack打包的js文件的對(duì)應(yīng)的字符串都替換為我們?cè)谶@個(gè)插件中指定的字符串。
0x003 栗子來了
初始化項(xiàng)目
+ 0x005-define-plugin
+ src
- index.js
- webpack.config.js
安裝依賴包
$ npm init -y $ npm install --save-dev webpack
編寫webpack.config.js
var path = require("path")
module.exports = {
entry : ["./src/index.js"],
output: {
path : path.resolve(__dirname, "dist"),
filename: "index.js"
}
}
添加插件，并指定幾個(gè)常量
var path = require("path")
var webpack = require("webpack")
module.exports = {
entry : ["./src/index.js"],
output : {
path : path.resolve(__dirname, "dist"),
filename: "index.js"
},
plugins: [
new webpack.DefinePlugin({
PRODUCTION : JSON.stringify(true),
VERSION : JSON.stringify("2.0.1"),
BROWSER_SUPPORTS_HTML5: true,
TWO : "1+1",
"typeof window" : JSON.stringify("object"),
不想寫代碼 : JSON.stringify("i like boss"),
彈窗一下 : "alert("我彈窗了")"
})
]
}
調(diào)用這幾個(gè)變量
// src/index.js
console.log("Running App version " + VERSION);
if (!BROWSER_SUPPORTS_HTML5)
console.log("BROWSER_SUPPORTS_HTML5")
if (PRODUCTION) {
console.log("Production log")
}
console.log(TWO)
console.log(typeof window)
console.log(不想寫代碼)
彈窗一下
打包并查看打包后的結(jié)果
// dist/index.js
...
console.log("Running App version " + "2.0.1");
if (false)
console.log("BROWSER_SUPPORTS_HTML5")
if (true) {
console.log("Production log")
}
console.log(1+1)
console.log("object")
console.log("i like boss")
alert("我彈窗了")
...
就是這種用處了，直接將匹配的字符串替換，當(dāng)然后面兩句是玩笑，萬萬不可這么做，直接用這個(gè)插件替換邏輯會(huì)造成維護(hù)上的問題的，推薦只使用這個(gè)插件做全局的變量替換，比如在不同環(huán)境之間切換等。
更多細(xì)節(jié)，查閱webpack關(guān)于definePlugin章節(jié)。
0x004 注意該插件是簡(jiǎn)單的字符串替換，所以如果是定義常量最好使用""包裹要替換的內(nèi)容，或者使用JSON.stringify()轉(zhuǎn)化，否則會(huì)變成代碼直接插入，比如版本號(hào)：""1.2.1"",這樣替換的時(shí)候就會(huì)變成"1.2.1",而不會(huì)變成1.2.1,導(dǎo)致錯(cuò)誤的數(shù)據(jù)格式。
0x005 最佳使用搭配（使用場(chǎng)景而已，日后會(huì)詳細(xì)說明）
git配合jenkins之類的ci做自動(dòng)化發(fā)布的時(shí)候注入版本號(hào)
- 每一次`git push`就自動(dòng)遞增`package.json`中的版本號(hào) - `git tag`讀取`package.json`中的版本號(hào)發(fā)布新版本 - `jenkins`接收到`webhook`之后，調(diào)用`webpack`構(gòu)建發(fā)布版本，`webpack`將會(huì)注入`package.json`中的版本號(hào)，讓`app`中顯示當(dāng)前的版本 - 打包完成之后做資源上傳，頁(yè)面部署之類的 - 這樣就讓`git`版本號(hào)、`app`版本號(hào)、`package.json`版本號(hào)統(tǒng)一。
切換環(huán)境
- 當(dāng)擁有兩套環(huán)境時(shí)，比如測(cè)試環(huán)境和正式環(huán)境，我們可以定義`PRODUCTION`變量來做判定，判定當(dāng)前的環(huán)境，并對(duì)此作出不同的操作，比如替換`api`地址等0x006 資源
源代碼
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89564.html
摘要：同時(shí)不能直接單純的指定輸出的文件名稱，比如，將會(huì)報(bào)錯(cuò)，可以換成以下方式指定，或者其他類似方式。如果打包過程出現(xiàn)錯(cuò)誤，比如語(yǔ)法錯(cuò)誤，將會(huì)在控制臺(tái)以紅色文字顯示，并且在你修復(fù)之后會(huì)再次打包。 0x001 概述 其實(shí)我不知道怎么寫，所以決定就一塊一塊的寫點(diǎn)平常配置的過程，根據(jù)不同東西稍微分區(qū)一下就好了 0x002 初始化項(xiàng)目結(jié)構(gòu) $ mkdir webpack_study $ cd webp...
摘要：插件介紹就是提供全局變量啦全局定義栗子初始化項(xiàng)目安裝依賴包編寫添加插件，并定義調(diào)用打包并用瀏覽器打開查看控制臺(tái)全局定義自定義函數(shù)栗子添加定義添加文件調(diào)用打包并執(zhí)行輸出資源源代碼 0x001 概述 上一章講的是definePlugin的用法，和這一章依舊沒有任何關(guān)系，這一章講的時(shí)候providerPlugin。 0x002 插件介紹 就是提供全局變量啦 0x003 全局定義jquery栗...
摘要：概述上一章講的是樣式裝載相關(guān)的，這一章見得是腳本加載相關(guān)的環(huán)境配置栗子加載安裝依賴修改配置添加配置文件使用編寫腳本打包并查看結(jié)果可以看到，語(yǔ)法被自動(dòng)轉(zhuǎn)化成了更多配置請(qǐng)查閱關(guān)于章節(jié)栗子加載安裝依賴 0x001 概述 上一章講的是樣式裝載相關(guān)的loader，這一章見得是腳本加載相關(guān)的loader 0x002 環(huán)境配置 $ mkdir 0x012-transliling-loader $ c...
摘要：概述上一章講的是其他一些常用的小插件，這一章講的是自定義插件。打包并查看文件更多配置請(qǐng)查閱關(guān)于自定義章節(jié)資源源代碼 0x001 概述 上一章講的是其他一些常用的小插件，這一章講的是自定義插件。 0x002 環(huán)境配置 $ mkdir 0x0016-other-plugin $ cd 0x0016-other-plugin $ npm init -y $ vim webpack.confi...
摘要：概述上一章講的是，這一章講的是依舊是沒有任何關(guān)系。配合插件自動(dòng)插入修改配置打包并查看它以的形式被插入頭部多入口文件打包添加入口修改插件命名方式打包并查看更多用法，請(qǐng)查閱關(guān)于章節(jié)資源源代碼 0x001 概述 上一章講的是Dll，這一章講的是ExtractTextWebpackPlugin,依舊是沒有任何關(guān)系。 0x002 插件介紹 這個(gè)插件用來將css導(dǎo)出到單獨(dú)文件 0x003 栗子-不...
閱讀 1792·2021-10-11 10:57
閱讀 2398·2021-10-08 10:14
閱讀 3424·2019-08-29 17:26
閱讀 3396·2019-08-28 17:54
閱讀 3050·2019-08-26 13:38
閱讀 2934·2019-08-26 12:19
閱讀 3636·2019-08-23 18:05
閱讀 1306·2019-08-23 17:04
