從零開始的webpack生活-0x005：DefinePlugin奇妙用處

The question 發布于2019-08-21 17:28 / 1885人閱讀

摘要：注意該插件是簡單的字符串替換，所以如果是定義常量最好使用包裹要替換的內容，或者使用轉化，否則會變成代碼直接插入，比如版本號這樣替換的時候就會變成而不會變成導致錯誤的數據格式。

0x001 概述

上一章講的是js壓縮混淆，和這一章沒有半毛錢關系，這章講的是DefinePlugin，一個好像沒有用，但其實很好用的一個插件，我很喜歡，嘿嘿嘿！

0x002 插件介紹

說白了，這是一個簡單的字符串替換插件，將我們所有經過webpack打包的js文件的對應的字符串都替換為我們在這個插件中指定的字符串。

0x003 栗子來了

初始化項目

+ 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"
    }
}

添加插件，并指定幾個常量

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("我彈窗了")"
        })
    ]
}

調用這幾個變量

// 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(不想寫代碼)


彈窗一下

打包并查看打包后的結果

// 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("我彈窗了")
...

就是這種用處了，直接將匹配的字符串替換，當然后面兩句是玩笑，萬萬不可這么做，直接用這個插件替換邏輯會造成維護上的問題的，推薦只使用這個插件做全局的變量替換，比如在不同環境之間切換等。

更多細節，查閱webpack關于definePlugin章節。

0x004 注意

該插件是簡單的字符串替換，所以如果是定義常量最好使用""包裹要替換的內容，或者使用JSON.stringify()轉化，否則會變成代碼直接插入，比如版本號：""1.2.1"",這樣替換的時候就會變成"1.2.1",而不會變成1.2.1,導致錯誤的數據格式。

0x005 最佳使用搭配（使用場景而已，日后會詳細說明）

git配合jenkins之類的ci做自動化發布的時候注入版本號

- 每一次`git push`就自動遞增`package.json`中的版本號
- `git tag`讀取`package.json`中的版本號發布新版本
- `jenkins`接收到`webhook`之后，調用`webpack`構建發布版本，`webpack`將會注入`package.json`中的版本號，讓`app`中顯示當前的版本
- 打包完成之后做資源上傳，頁面部署之類的
- 這樣就讓`git`版本號、`app`版本號、`package.json`版本號統一。

切換環境

- 當擁有兩套環境時，比如測試環境和正式環境，我們可以定義`PRODUCTION`變量來做判定，判定當前的環境，并對此作出不同的操作，比如替換`api`地址等

0x006 資源

源代碼

云服務器 GPU云服務器從零開始的郵件服務器從零開始 linux從零開始 python從零開始

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89564.html

從零開始的webpack生活-0x001：webpack初次相逢

摘要：同時不能直接單純的指定輸出的文件名稱，比如，將會報錯，可以換成以下方式指定，或者其他類似方式。如果打包過程出現錯誤，比如語法錯誤，將會在控制臺以紅色文字顯示，并且在你修復之后會再次打包。 0x001 概述其實我不知道怎么寫，所以決定就一塊一塊的寫點平常配置的過程，根據不同東西稍微分區一下就好了 0x002 初始化項目結構 $ mkdir webpack_study $ cd webp...

Turbo 2019-08-21 17:27 評論0 收藏0
從零開始的webpack生活-0x006：providerPlugin全局定義

摘要：插件介紹就是提供全局變量啦全局定義栗子初始化項目安裝依賴包編寫添加插件，并定義調用打包并用瀏覽器打開查看控制臺全局定義自定義函數栗子添加定義添加文件調用打包并執行輸出資源源代碼 0x001 概述上一章講的是definePlugin的用法，和這一章依舊沒有任何關系，這一章講的時候providerPlugin。 0x002 插件介紹就是提供全局變量啦 0x003 全局定義jquery栗...

li21 2019-08-21 17:28 評論0 收藏0
從零開始的webpack生活-0x012：TranspilingLoader裝載腳本

摘要：概述上一章講的是樣式裝載相關的，這一章見得是腳本加載相關的環境配置栗子加載安裝依賴修改配置添加配置文件使用編寫腳本打包并查看結果可以看到，語法被自動轉化成了更多配置請查閱關于章節栗子加載安裝依賴 0x001 概述上一章講的是樣式裝載相關的loader，這一章見得是腳本加載相關的loader 0x002 環境配置 $ mkdir 0x012-transliling-loader $ c...

Tonny 2019-08-21 17:32 評論0 收藏0
從零開始的webpack生活-0x017：CustomPlugin自定義插件

摘要：概述上一章講的是其他一些常用的小插件，這一章講的是自定義插件。打包并查看文件更多配置請查閱關于自定義章節資源源代碼 0x001 概述上一章講的是其他一些常用的小插件，這一章講的是自定義插件。 0x002 環境配置 $ mkdir 0x0016-other-plugin $ cd 0x0016-other-plugin $ npm init -y $ vim webpack.confi...

springDevBird 2019-08-21 17:36 評論0 收藏0
從零開始的webpack生活-0x015：ExtractTextWebpackPlugin分離樣式

摘要：概述上一章講的是，這一章講的是依舊是沒有任何關系。配合插件自動插入修改配置打包并查看它以的形式被插入頭部多入口文件打包添加入口修改插件命名方式打包并查看更多用法，請查閱關于章節資源源代碼 0x001 概述上一章講的是Dll，這一章講的是ExtractTextWebpackPlugin,依舊是沒有任何關系。 0x002 插件介紹這個插件用來將css導出到單獨文件 0x003 栗子-不...

Jonathan Shieber 2019-08-21 17:29 評論0 收藏0