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

0x001 概述

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

0x002 插件介紹

說白了，這是一個簡單的字符串替換插件，將咱們全部通過webpack打包的js文件的對應的字符串都替換爲咱們在這個插件中指定的字符串。

0x003 栗子來了

1. 初始化項目

   + 0x005-define-plugin
     + src
       - index.js
     - webpack.config.js

2. 安裝依賴包

   $ npm init -y
   $ npm install --save-dev webpack

3. 編寫webpack.config.js

   var path       = require('path')
   module.exports = {
       entry : ['./src/index.js'],
       output: {
           path    : path.resolve(__dirname, 'dist'),
           filename: 'index.js'
       }
   }

4. 添加插件，並指定幾個常量

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

5. 調用這幾個變量

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

6. 打包並查看打包後的結果

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

   就是這種用處了，直接將匹配的字符串替換，固然後面兩句是玩笑，萬萬不可這麼作，直接用這個插件替換邏輯會形成維護上的問題的，推薦只使用這個插件作全局的變量替換，好比在不一樣環境之間切換等。

7. 更多細節，查閱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 資源

• 源代碼