YYDS: Webpack Plugin開發

時間  2021-01-20
標籤 javascript css html 前端 vue java webpack git github web 欄目 JavaScript 简体版
原文   原文鏈接

YYDS: Webpack Plugin開發
  做爲一名踏足前端時間不長的小開發必須得聊一聊webpack，剛開始接觸webpack時第一反應這是啥(⊙_⊙)? 怎麼這麼複雜，感受好難呀，算了先無論這些！時間是個好東西呀，隨着對前端工程化的實踐和理解慢慢加深，跟webpack接觸愈來愈多，最終仍是被ta折服，不由高呼一聲「webpack yyds（永遠滴神）！」javascript

  去年年中就想寫一些關於webpack的文章，因爲各類緣由耽擱了（主要是以爲對webpack理解還不夠，不敢妄自下筆）；臨近年節，時間也有些了，與其 "摸魚"不如摸摸webpack，整理一些"年貨"分享給須要的xdm！後續會繼續寫一些【 Webpack】系列文章，xdm監督···css

導讀

  本文主要經過實現一個cdn優化的插件CdnPluginInject介紹下webpack的插件plugin開發的具體流程，中間會涉及到html-webpack-plugin插件的使用、vue/cli3+項目中webpack插件的配置以及webpack相關知識點的說明。全文大概2800+字，預計耗時5~10分鐘，但願xdm看完有所學、有所思、有所輸出！html

注意：文章中實例基於vue/cli3+工程展開！前端

1、cdn常規使用

index.html:vue

<head>
  ···
</head>
<body>
  <div id="app"></div>
  <script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
  ···
</body>

vue.config.js:java

module.exports = {
  ···
  configureWebpack: {
    ···
    externals: {
      'vuex': 'Vuex',
      'vue-router': 'VueRouter',
      ···
    }
  },

2、開發一個webpack plugin

webpack官網如此介紹到：插件向第三方開發者提供了 webpack 引擎中完整的能力。使用階段式的構建回調，開發者能夠引入它們本身的行爲到 webpack 構建流程中。建立插件比建立 loader 更加高級，由於你將須要理解一些 webpack 底層的內部特性來實現相應的鉤子！webpack

一個插件由如下構成：git

  • 一個具名 JavaScript 函數。
  • 在它的原型上定義 apply 方法。
  • 指定一個觸及到 webpack 自己的 事件鉤子。
  • 操做 webpack 內部的實例特定數據。
  • 在實現功能後調用 webpack 提供的 callback。 
    // 一個 JavaScript class
class MyExampleWebpackPlugin {
// 將 `apply` 定義爲其原型方法，此方法以 compiler 做爲參數
apply(compiler) {
// 指定要附加到的事件鉤子函數
 compiler.hooks.emit.tapAsync(
   'MyExampleWebpackPlugin',
   (compilation, callback) =&gt; {
     console.log('This is an example plugin!');
     console.log('Here’s the `compilation` object which represents a single build of assets:', compilation);
     // 使用 webpack 提供的 plugin API 操做構建結果
     compilation.addModule(/* ... */);
     callback();
   }
 );
}
}

3、cdn優化插件實現

思路：github

  • 一、建立一個具名JavaScript 函數（使用ES6的class實現）;
  • 二、在它的原型上定義 apply 方法；
  • 三、指定一個觸及到 webpack 自己的事件鉤子（此處觸及compilation鉤子：編譯(compilation)建立以後，執行插件）；
  • 四、在鉤子事件中操做index.html（將cdn的script標籤插入到index.html中）；
  • 五、在apply方法執行完以前將cdn的參數放入webpack的外部擴展externals中；
  • 六、在實現功能後調用webpack 提供的callback；

實現步驟：web

一、建立一個具名JavaScript 函數（使用ES6的class實現）

  建立類cdnPluginInject，添加類的構造函數接收傳遞過來的參數；此處咱們定義接收參數的格式以下：

modules:[
  {
    name: "xxx",    //cdn包的名字
    var: "xxx", //cdn引入庫在項目中使用時的變量名
    path: "http://cdn.url/xxx.js" //cdn的url連接地址
  },
  ···
]

定義類的變量modules接收傳遞的cdn參數的處理結果：

class CdnPluginInject {
  constructor({
    modules,
  }) {
    // 若是是數組，將this.modules變換成對象形式
    this.modules = Array.isArray(modules) ? { ["defaultCdnModuleKey"]: modules } : modules; 
  }
 ···
}
module.exports = CdnPluginInject;

二、在它的原型上定義 apply 方法

插件是由一個構造函數（此構造函數上的 prototype 對象具備 apply 方法）的所實例化出來的。這個 apply 方法在安裝插件時，會被 webpack compiler 調用一次。apply 方法能夠接收一個 webpack compiler 對象的引用，從而能夠在回調函數中訪問到 compiler 對象

cdnPluginInject.js代碼以下：

class CdnPluginInject {
  constructor({
    modules,
  }) {
    // 若是是數組，將this.modules變換成對象形式
    this.modules = Array.isArray(modules) ? { ["defaultCdnModuleKey"]: modules } : modules; 
  }
  //webpack plugin開發的執行入口apply方法
  apply(compiler) {
    ···
  }

module.exports = CdnPluginInject;

三、指定一個觸及到 webpack 自己的事件鉤子

  此處觸及compilation鉤子：編譯(compilation)建立以後，執行插件。

YYDS: Webpack Plugin開發

  compilation是compiler 的一個hooks函數， compilation 會建立一次新的編譯過程實例，一個 compilation 實例能夠訪問全部模塊和它們的依賴，在獲取到這些模塊後，根據須要對其進行操做處理！

class CdnPluginInject {
  constructor({
    modules,
  }) {
    // 若是是數組，將this.modules變換成對象形式
    this.modules = Array.isArray(modules) ? { ["defaultCdnModuleKey"]: modules } : modules; 
  }
  //webpack plugin開發的執行入口apply方法
  apply(compiler) {
    //獲取webpack的輸出配置對象
    const { output } = compiler.options;
    //處理output.publicPath， 決定最終資源相對於引用它的html文件的相對位置
    output.publicPath = output.publicPath || "/";
    if (output.publicPath.slice(-1) !== "/") {
      output.publicPath += "/";
    }
    //觸發compilation鉤子函數
    compiler.hooks.compilation.tap("CdnPluginInject", compilation => { 
     ···
  }
}

module.exports = CdnPluginInject;

四、在鉤子事件中操做index.html

  這一步主要是要實現 將cdn的script標籤插入到index.html中 ；如何實現呢？在vue項目中webpack進行打包時實際上是使用html-webpack-plugin生成.html文件的，因此咱們此處也能夠藉助html-webpack-plugin對html文件進行操做插入cdn的script標籤。

// 4.1 引入html-webpack-plugin依賴
const HtmlWebpackPlugin = require("html-webpack-plugin");

class CdnPluginInject {
  constructor({
    modules,
  }) {
    // 若是是數組，將this.modules變換成對象形式
    this.modules = Array.isArray(modules) ? { ["defaultCdnModuleKey"]: modules } : modules; 
  }
  //webpack plugin開發的執行入口apply方法
  apply(compiler) {
    //獲取webpack的輸出配置對象
    const { output } = compiler.options;
    //處理output.publicPath， 決定最終資源相對於引用它的html文件的相對位置
    output.publicPath = output.publicPath || "/";
    if (output.publicPath.slice(-1) !== "/") {
      output.publicPath += "/";
    }
    //觸發compilation鉤子函數
    compiler.hooks.compilation.tap("CdnPluginInject", compilation => { 
      // 4.2 html-webpack-plugin中的hooks函數，當在資源生成以前異步執行
      HtmlWebpackPlugin.getHooks(compilation).beforeAssetTagGeneration
       .tapAsync("CdnPluginInject", (data, callback) => {   // 註冊異步鉤子
            //獲取插件中的cdnModule屬性(此處爲undefined，由於沒有cdnModule屬性)
          const moduleId = data.plugin.options.cdnModule;  
          // 只要不是false（禁止）就行
          if (moduleId !== false) {    
             // 4.3獲得全部的cdn配置項
            let modules = this.modules[                    
                moduleId || Reflect.ownKeys(this.modules)[0] 
            ];
            if (modules) {
              // 4.4 整合已有的js引用和cdn引用
              data.assets.js = modules
                .filter(m => !!m.path)
                .map(m => {
                  return m.path;
                })
                .concat(data.assets.js);
              // 4.5 整合已有的css引用和cdn引用
              data.assets.css = modules
                .filter(m => !!m.style)
                .map(m => {
                  return m.style;
                })
                .concat(data.assets.css); 
            }
          }
            // 4.6 返回callback函數
          callback(null, data);
        });
  }
}

module.exports = CdnPluginInject;

接下來逐步對上述實現進行分析：

  • 4.一、引入html-webpack-plugin依賴，這個不用多說；
  • 4.二、調用html-webpack-plugin中的hooks函數，在html-webpack-plugin中資源生成以前異步執行；這裏由衷的誇誇html-webpack-plugin的做者了，ta在開發html-webpack-plugin時就在插件中內置了不少的hook函數供開發者在調用插件的不一樣階段嵌入不一樣操做；所以，此處咱們可使用html-webpack-plugin的beforeAssetTagGeneration對html進行操做；
  • 4.三、 在beforeAssetTagGeneration中，獲取獲得全部的須要進行cdn引入的配置數據；
  • 4.四、 整合已有的js引用和cdn引用；經過data.assets.js能夠獲取到compilation階段全部生成的js資源（最終也是插入index.html中）的連接/路徑，而且將須要配置的cdn的path數據（cdn的url）合併進去；
  • 4.五、 整合已有的css引用和cdn引用；經過data.assets.css能夠獲取到compilation階段全部生成的css資源（最終也是插入index.html中）的連接/路徑，而且將須要配置的css類型cdn的path數據（cdn的url）合併進去；
  • 4.六、 返回callback函數，目的是告訴webpack該操做已經完成，能夠進行下一步了；

五、設置webpack的外部擴展externals

  在apply方法執行完以前還有一步必須完成：將cdn的參數配置到外部擴展externals中；能夠直接經過compiler.options.externals獲取到webpack中externals屬性，通過操做將cdn配置中數據配置好就ok了。

六、callback；

  返回callback，告訴webpack CdnPluginInject插件已經完成；

// 4.1 引入html-webpack-plugin依賴
const HtmlWebpackPlugin = require("html-webpack-plugin");

class CdnPluginInject {
  constructor({
    modules,
  }) {
    // 若是是數組，將this.modules變換成對象形式
    this.modules = Array.isArray(modules) ? { ["defaultCdnModuleKey"]: modules } : modules; 
  }
  //webpack plugin開發的執行入口apply方法
  apply(compiler) {
    //獲取webpack的輸出配置對象
    const { output } = compiler.options;
    //處理output.publicPath， 決定最終資源相對於引用它的html文件的相對位置
    output.publicPath = output.publicPath || "/";
    if (output.publicPath.slice(-1) !== "/") {
      output.publicPath += "/";
    }
    //觸發compilation鉤子函數
    compiler.hooks.compilation.tap("CdnPluginInject", compilation => { 
      // 4.2 html-webpack-plugin中的hooks函數，當在資源生成以前異步執行
      HtmlWebpackPlugin.getHooks(compilation).beforeAssetTagGeneration
       .tapAsync("CdnPluginInject", (data, callback) => {   // 註冊異步鉤子
            //獲取插件中的cdnModule屬性(此處爲undefined，由於沒有cdnModule屬性)
          const moduleId = data.plugin.options.cdnModule;  
          // 只要不是false（禁止）就行
          if (moduleId !== false) {    
             // 4.3獲得全部的cdn配置項
            let modules = this.modules[                    
                moduleId || Reflect.ownKeys(this.modules)[0] 
            ];
            if (modules) {
              // 4.4 整合已有的js引用和cdn引用
              data.assets.js = modules
                .filter(m => !!m.path)
                .map(m => {
                  return m.path;
                })
                .concat(data.assets.js);
              // 4.5 整合已有的css引用和cdn引用
              data.assets.css = modules
                .filter(m => !!m.style)
                .map(m => {
                  return m.style;
                })
                .concat(data.assets.css); 
            }
          }
            // 4.6 返回callback函數
          callback(null, data);
        });

      // 5.1 獲取externals
        const externals = compiler.options.externals || {};
      // 5.2 cdn配置數據添加到externals
      Reflect.ownKeys(this.modules).forEach(key => {
        const mods = this.modules[key];
        mods
          .forEach(p => {
          externals[p.name] = p.var || p.name; //var爲項目中的使用命名
        });
      });
      // 5.3 externals賦值
      compiler.options.externals = externals; //配置externals

      // 6 返回callback
      callback();
  }
}

module.exports = CdnPluginInject;

  至此，一個完整的webpack插件CdnPluginInject就開發完成了！接下來使用着試一試。

4、cdn優化插件使用

  在vue項目的vue.config.js文件中引入並使用CdnPluginInject：

cdn配置文件CdnConfig.js:

/*
 * 配置的cdn
 * @name: 第三方庫的名字
 * @var： 第三方庫在項目中的變量名
 * @path： 第三方庫的cdn連接
 */
module.exports = [
  {
    name: "moment",
    var: "moment",
    path: "https://cdn.bootcdn.net/ajax/libs/moment.js/2.27.0/moment.min.js"
  },
  ···
];

configureWebpack中配置：

const CdnPluginInject = require("./CdnPluginInject");
const cdnConfig = require("./CdnConfig");

module.exports = {
  ···
  configureWebpack: config => {
    //只有是生產山上線打包才使用cdn配置
    if(process.env.NODE.ENV =='production'){
      config.plugins.push(
        new CdnPluginInject({
          modules: CdnConfig
        })
      )
    }
  }
  ···
}

chainWebpack中配置：

const CdnPluginInject = require("./CdnPluginInject");
const cdnConfig = require("./CdnConfig");

module.exports = {
  ···
  chainWebpack: config => {
    //只有是生產山上線打包才使用cdn配置
    if(process.env.NODE.ENV =='production'){
      config.plugin("cdn").use(
        new CdnPluginInject({
          modules: CdnConfig
        })
      )
    }
  }
  ···
}

  經過使用CdnPluginInject：

  • 一、經過配置實現對cdn優化的管理和維護；
  • 二、實現針對不一樣環境作cdn優化配置（開發環境直接使用本地安裝依賴進行調試，生產環境適應cdn方式優化加載）；

5、小結

  看完後確定有webpack大佬有一絲絲疑惑，這個插件不就是 webpack-cdn-plugin 的乞丐版！CdnPluginInject只不過是本人根據webpack-cdn-plugin源碼的學習，結合本身項目實際所需修改的仿寫版本，相較於webpack-cdn-plugin將cdn連接的生成進行封裝，CdnPluginInject是直接將cdn連接進行配置，對於選擇cdn顯配置更加簡單。想要進一步學習的xdm能夠看看webpack-cdn-plugin的源碼，通過做者的不斷的迭代更新，其提供的可配置參數更加豐富，功能更增強大（再次膜拜）。

重點：整理不易，以爲還能夠的xdm記得 一鍵三連 喲！

文章參考

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程