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教程