webpack之plugin编写 -- 从html-webpack-plugin源码的角度来看如何编写plugin

准备写个webpack的plugin，打开官网文档https://www.webpackjs.com/contribute/writing-a-plugin，发现有点蒙圈，看完文档好像知道怎么写，但又写不出来，所以看下html-webpack-plugin的实现，从而整体了解下插件的整体流程

一、html-webpack-plugin源码分析

1.插件的作用

这个插件都用过，它的作用可以概况为两类：

生成html页面
处理bundle.js

2.结合plugin 的编写步骤分析html-webpack-plugin的实现

2.1流程步骤

webpack文档的步骤：

webpack 插件由以下组成：
1. 一个 JavaScript 命名函数。
2.在插件函数的 prototype 上定义一个 apply 方法。
3.指定一个绑定到 webpack 自身的事件钩子。
4.处理 webpack 内部实例的特定数据。
5.功能完成后调用 webpack 提供的回调。

根据文档步骤可以写出一下代码：

class HtmlWebpackPlugin {
     constructor(options) {

     }
     apply(compiler){
         compiler.hooks.emit.tapAsync((compilation,callback) => {
              ...
             callback()
         })
     }
}

module.exports = HtmlWebpackPlugin;

这就一个plugin插件的雏形，这个光看文档也能写出来，所以看源码的主要目的是看第4步，即如何处理webpack内部实例的特定数据

2.2需要了解的钩子

a.compiler

www.webpackjs.com/api/compile…

github.com/webpack/web…

它是扩展自tapable类，用来注册和调用插件，tapable的用法有篇博客专业介绍，这里不再说了，简单来说就是compiler扩展与tapable,抛出一系列的生命周期钩子函数，以便我们在webpack的不同编译阶段进行不同的操作

本次主要关注 emit钩子

b.compilation

www.webpackjs.com/api/compila…

github.com/webpack/web…

它可以理解为webpack编译一次生成的整个编译资源，一个 compilation 对象表现了当前的模块资源、编译生成资源、变化的文件、以及被跟踪依赖的状态信息。compilation 对象也提供了很多关键时机的回调，以供插件做自定义处理时选择使用。本次主要关注 assets

2.3html-webpack-plugin如何处理数据

a. 如何生成html

1.插件调用：

new HtmlWebPackPlugin({
    template: "./public/index.html",
    filename: "./index.html"
}),

当插件调用的时候会传入html 的 template以及filename

apply(){
 ...
 this.options.template = this.getFullTemplatePath(this.options.template, compiler.context);
 ...
}

getFullTemplatePath() 会判断模板是否配置了loader,如果没有配置会使用默认的loader

2.index.html生成过程：

index.js
 ....
 compilationPromise = childCompiler.compileTemplate(self.options.template, compiler.context, self.options.filename, compilation)
 .....


compiler.js

....
   const childCompiler = compilation.createChildCompiler(compilerName, outputOptions);
...   // 创建一个跟当前Compiler一样配置的Compiler（childCompiler）对象
    childCompiler.runAsChild((err, entries, childCompilation) => {  //开始执行childCompiler编译器的run操作（独立于主编译器外的编译器）
    ...
     resolve({
          hash: entries[0].hash,  //当前模块（index.html）的hash值
          outputName: outputName,  //当前模块（index.html）的名称
          content: childCompilation.assets[outputName].source() /当前模块（index.html）编译过后的源码
        });
    })
....

到这里其实index.html已经加载了，childCompilation.assets[outputName].source() 返回的就是index.html编译之后的源码，下一步就是把所有的打包文件添加到index.html中

3.将生成的资源文件（js/css）插入html

处理chunks

const allChunks = compilation.getStats().toJson(chunkOnlyConfig).chunks;
      // Filter chunks (options.chunks and options.excludeCHunks)
      let chunks = self.filterChunks(allChunks, self.options.chunks, self.options.excludeChunks);
      // Sort chunks
      chunks = self.sortChunks(chunks, self.options.chunksSortMode, compilation);
      // Let plugins alter the chunks and the chunk sorting
      if (compilation.hooks) {
        chunks = compilation.hooks.htmlWebpackPluginAlterChunks.call(chunks, { plugin: self });
      } else {
        // Before Webpack 4
        chunks = compilation.applyPluginsWaterfall('html-webpack-plugin-alter-chunks', chunks, { plugin: self });
      }
      // Get assets
      const assets = self.htmlWebpackPluginAssets(compilation, chunks);

compilation的assets是map对象，html-webpack-plugin会先将assets的chunks处理一下，便于后期插入

  evaluateCompilationResult (compilation, source) {
    if (!source) {
      return Promise.reject('The child compilation didn\'t provide a result');
    }
    source = source.replace('var HTML_WEBPACK_PLUGIN_RESULT =', '');
    const template = this.options.template.replace(/^.+!/, '').replace(/\?.+$/, '');
    const vmContext = vm.createContext(_.extend({HTML_WEBPACK_PLUGIN: true, require: require}, global));
    const vmScript = new vm.Script(source, {filename: template});
    let newSource;
    try {
      newSource = vmScript.runInContext(vmContext);
    } catch (e) {
      return Promise.reject(e);
    }
    if (typeof newSource === 'object' && newSource.__esModule && newSource.default) {
      newSource = newSource.default;
    }
    return typeof newSource === 'string' || typeof newSource === 'function'
      ? Promise.resolve(newSource)
      : Promise.reject('The loader "' + this.options.template + '" didn\'t return html.');
  }

这里使用node的vm（虚拟机）来构建index.html源码,source 其实就是上一步生成的compilationPromise

  generateHtmlTags (assets) {
    const scripts = assets.js.map(scriptPath => ({
      tagName: 'script',
      closeTag: true,
      attributes: {
        type: 'text/javascript',
        src: scriptPath
      }
    }));
    const selfClosingTag = !!this.options.xhtml;
    const styles = assets.css.map(stylePath => ({
      tagName: 'link',
      selfClosingTag: selfClosingTag,
      voidTag: true,
      attributes: {
        href: stylePath,
        rel: 'stylesheet'
      }
    }));
    let head = this.getMetaTags();
    let body = [];
    if (assets.favicon) {
      head.push({
        tagName: 'link',
        selfClosingTag: selfClosingTag,
        voidTag: true,
        attributes: {
          rel: 'shortcut icon',
          href: assets.favicon
        }
      });
    }
    head = head.concat(styles)
    if (this.options.inject === 'head') {
      head = head.concat(scripts);
    } else {
      body = body.concat(scripts);
    }
    return {head: head, body: body};
  }

generateHtmlTags（）根据assets中js和css生成要插入html的head和body,assets是从compilation.getStats()获取并整理处理的 chunks对象

injectAssetsIntoHtml (html, assets, assetTags) {
    const htmlRegExp = /(<html[^>]*>)/i;
    const headRegExp = /(<\/head\s*>)/i;
    const bodyRegExp = /(<\/body\s*>)/i;
    const body = assetTags.body.map(this.createHtmlTag.bind(this));
    const head = assetTags.head.map(this.createHtmlTag.bind(this));

    if (body.length) {
      if (bodyRegExp.test(html)) {
        // Append assets to body element
        html = html.replace(bodyRegExp, match => body.join('') + match);
      } else {
        // Append scripts to the end of the file if no <body> element exists:
        html += body.join('');
      }
    }

    if (head.length) {
      // Create a head tag if none exists
      if (!headRegExp.test(html)) {
        if (!htmlRegExp.test(html)) {
          html = '<head></head>' + html;
        } else {
          html = html.replace(htmlRegExp, match => match + '<head></head>');
        }
      }

      // Append assets to head element
      html = html.replace(headRegExp, match => head.join('') + match);
    }

    // Inject manifest into the opening html tag
    if (assets.manifest) {
      html = html.replace(/(<html[^>]*)(>)/i, (match, start, end) => {
        // Append the manifest only if no manifest was specified
        if (/\smanifest\s*=/.test(match)) {
          return match;
        }
        return start + ' manifest="' + assets.manifest + '"' + end;
      });
    }
    return html;
  }

injectAssetsIntoHtml()函数就是将处理过的body和header插入index.html中

...
compilation.assets[self.childCompilationOutputName] = {
    source: () => html,
    size: () => html.length
 };
....

最后一步就是将已经插入资源的index.html加入到compilation的assets中，便于webpack打包生成文件

然后再去看webpack官网plugin编写的案例：

function FileListPlugin(options) {}   //第一步： 创建一个函数

FileListPlugin.prototype.apply = function(compiler) {     //第二步：在函数的prototype上定义一个apply方法
  compiler.plugin('emit', function(compilation, callback) {  //第三步：指定一个webpack自身的钩子
    
    
    //第四步： 处理webpack内部实例的特定数据
      webpack的所有资源都会生成在assets对象中(html是html-webpack-plugin生成插入的)，
      assets 对象：
        {
          './index.html': {
              source: [Function:source],     //文件源码
              size:[Function:size]           //文件大小
          }
        }
     所以如果想生成新文件可以直接在assets中插入，webpack会将文件生成在dist文件（出口文件）下，如果想处理其他文件可以在assets中修改
    
    
    var filelist = 'In this build:\n\n';
    for (var filename in compilation.assets) {
      filelist += ('- '+ filename +'\n');
    }
    compilation.assets['filelist.md'] = {
      source: function() {
        return filelist;
      },
      size: function() {
        return filelist.length;
      }
    };

    callback();   //第五步： 功能完成之后调用webpack的回调
  });
};

module.exports = FileListPlugin;

最后本地调试插件：

weebpack.config.js

const HtmlWebPackPlugin = require('./html-webpack-plugin')  //引入本地文件
....
plugin:[
   new HtmlWebPackPlugin({
      template: "./public/index.html",
      filename: "./index.html"
   }),
]

本地开发完npm发布就行

webpack之plugin编写 -- 从html-webpack-plugin源码的角度来看如何编写plugin