关于webpack:YYDS-Webpack-Plugin开发

@[toc]
作为一名踏足前端工夫不长的小开发必须得聊一聊webpack，刚开始接触webpack时第一反馈这是啥(⊙_⊙)? 怎么这么简单，感觉好难呀，算了先不论这些！工夫是个好货色呀，随着对前端工程化的实际和了解缓缓加深，跟webpack接触越来越多，最终还是被ta折服，不禁高呼一声“webpack yyds（永远滴神）！”

去年年中就想写一些对于webpack的文章，因为各种起因耽误了（次要是感觉对webpack了解还不够，不敢妄自下笔）；邻近年节，工夫也有些了，与其 “摸鱼”不如摸摸webpack，整顿一些”年货”分享给须要的xdm！后续会持续写一些【 Webpack】系列文章，xdm监督···

导读

本文次要通过实现一个cdn优化的插件CdnPluginInject介绍下webpack的插件plugin开发的具体流程，两头会波及到html-webpack-plugin插件的应用、vue/cli3+我的项目中webpack插件的配置以及webpack相干知识点的阐明。全文大略2800+字，预计耗时5~10分钟，心愿xdm看完有所学、有所思、有所输入！

留神：文章中实例基于vue/cli3+工程开展！

一、cdn惯例应用

index.html:

<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:

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

二、开发一个webpack plugin

webpack官网如此介绍到：插件向第三方开发者提供了 webpack 引擎中残缺的能力。应用阶段式的构建回调，开发者能够引入它们本人的行为到 webpack 构建流程中。创立插件比创立 loader 更加高级，因为你将须要了解一些 webpack 底层的外部个性来实现相应的钩子！

一个插件由以下形成：
一个具名 JavaScript 函数。

在它的原型上定义 apply 办法。

指定一个涉及到 webpack 自身的事件钩子。

操作 webpack 外部的实例特定数据。

在实现性能后调用 webpack 提供的 callback。
// 一个 JavaScript class
class MyExampleWebpackPlugin {
// 将 `apply` 定义为其原型办法，此办法以 compiler 作为参数
 apply(compiler) {
   // 指定要附加到的事件钩子函数
     compiler.hooks.emit.tapAsync(
       'MyExampleWebpackPlugin',
       (compilation, callback) => {
         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();
       }
     );
 }
}

三、cdn优化插件实现

思路：

1、创立一个具名 JavaScript 函数（应用ES6的class实现）;
2、在它的原型上定义 apply 办法；
3、指定一个涉及到 webpack 自身的事件钩子（此处涉及compilation钩子：编译(compilation)创立之后，执行插件）；
4、在钩子事件中操作index.html（将cdn的script标签插入到index.html中）；
5、在apply办法执行完之前将cdn的参数放入webpack的内部扩大externals中；
6、在实现性能后调用 webpack 提供的 callback；

实现步骤：

1、创立一个具名 `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;

2、在它的原型上定义 `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;

3、指定一个涉及到 webpack 自身的事件钩子

此处涉及compilation钩子：编译(compilation)创立之后，执行插件。

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;

4、在钩子事件中操作`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.1、引入html-webpack-plugin依赖，这个不必多说；
4.2、调用html-webpack-plugin中的hooks函数，在html-webpack-plugin中资源生成之前异步执行；这里由衷的夸夸html-webpack-plugin的作者了，ta在开发html-webpack-plugin时就在插件中内置了很多的hook函数供开发者在调用插件的不同阶段嵌入不同操作；因而，此处咱们能够应用html-webpack-plugin的beforeAssetTagGeneration对html进行操作；
4.3、在beforeAssetTagGeneration中，获取失去所有的须要进行cdn引入的配置数据；
4.4、整合已有的js援用和cdn援用；通过data.assets.js能够获取到compilation阶段所有生成的js资源（最终也是插入index.html中）的链接/门路，并且将须要配置的cdn的path数据（cdn的url）合并进去；
4.5、整合已有的css援用和cdn援用；通过data.assets.css能够获取到compilation阶段所有生成的css资源（最终也是插入index.html中）的链接/门路，并且将须要配置的css类型cdn的path数据（cdn的url）合并进去；
4.6、返回callback函数，目标是通知webpack该操作曾经实现，能够进行下一步了；

5、设置`webpack`的`内部扩大externals`

在apply办法执行完之前还有一步必须实现：将cdn的参数配置到内部扩大externals中；能够间接通过compiler.options.externals获取到webpack中externals属性，通过操作将cdn配置中数据配置好就ok了。

6、 `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就开发实现了！接下来应用着试一试。

四、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：

1、通过配置实现对cdn优化的治理和保护；
2、实现针对不同环境做cdn优化配置（开发环境间接应用本地装置依赖进行调试，生产环境适应cdn形式优化加载）；

五、小结

看完后必定有webpack大佬有一丝丝纳闷，这个插件不就是 webpack-cdn-plugin 的乞丐版！CdnPluginInject只不过是自己依据webpack-cdn-plugin源码的学习，联合本人我的项目理论所需批改的仿写版本，相较于webpack-cdn-plugin将cdn链接的生成进行封装，CdnPluginInject是间接将cdn链接进行配置，对于抉择cdn显配置更加简略。想要进一步学习的xdm能够看看webpack-cdn-plugin的源码，通过作者的一直的迭代更新，其提供的可配置参数更加丰盛，性能更加弱小（再次膜拜）。

重点：整顿不易，感觉还能够的xdm记得一键三连哟！

文章参考

揭秘webpack-plugin
webpack-cdn-plugin的github

关于webpack:YYDS-Webpack-Plugin开发

导读

一、cdn惯例应用

二、开发一个webpack plugin

三、cdn优化插件实现

1、创立一个具名 `JavaScript` 函数（应用`ES6`的`class`实现）

2、在它的原型上定义 `apply` 办法

3、指定一个涉及到 webpack 自身的事件钩子

4、在钩子事件中操作`index.html`

5、设置`webpack`的`内部扩大externals`

6、 `callback`；

四、cdn优化插件应用

configureWebpack中配置：

chainWebpack中配置：

五、小结

文章参考

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于webpack:YYDS-Webpack-Plugin开发

导读

一、cdn惯例应用

二、开发一个webpack plugin

三、cdn优化插件实现

1、创立一个具名 JavaScript 函数（应用ES6的class实现）

2、在它的原型上定义 apply 办法

3、指定一个涉及到 webpack 自身的事件钩子

4、在钩子事件中操作index.html

5、设置webpack的内部扩大externals

6、 callback；

四、cdn优化插件应用

configureWebpack中配置：

chainWebpack中配置：

五、小结

文章参考

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

1、创立一个具名 `JavaScript` 函数（应用`ES6`的`class`实现）

2、在它的原型上定义 `apply` 办法

4、在钩子事件中操作`index.html`

5、设置`webpack`的`内部扩大externals`

6、 `callback`；

发表回复取消回复