HTML编程插件,webpack处理文件内容——编写html-webpack-plugin插件

目标

希望能在html文件里用prefetch预先下载资源，提升下一页的性能。

前言

平时用到vue-cli构建项目时，脚手架会将当前的资源放到

标签里用preload去提前下载。而这次我希望页面能提前下载下一页的资源，提升下一页的性能。

prefetch将会在浏览器空闲时间下载资源，且不阻塞页面渲染。

配置

功能

名称叫injectHtmlPlugin，可以接收ManifestPlugin插件生成的对象，然后预加载里面的资源。

编写思路

在html模板里写上here占个位置，然后用replace替换这一段。

webpack.config.js

html-webpack-plugin的插件在plugin里要写在他后面。

const manifest = require('./dist/manifest.json');

plugins: [

new ManifestPlugin(),

new HtmlWebpackPlugin({

template: './src/index.html',

}),

new injectHtmlPlugin(manifest),

],

const HtmlWebpackPlugin = require('html-webpack-plugin');

class injectHtmlPlugin {

constructor(options) {

this.insertInfo = options;

}

apply(compiler) {

const insertInfo = this.insertInfo;

compiler.hookspilation.tap('injectHtmlPlugin', (compilation) => {

HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync('injectHtmlPlugin', (htmlPluginData, cb) => {

// Manipulate the content

var str = '';

for (let key in insertInfo) {

str += ``;

}

var temp = htmlPluginData.html;

temp = temp.replace(//, str);

htmlPluginData.html = temp;

// Tell webpack to move on

cb(null, htmlPluginData);

});

});

}

}

module.exports = injectHtmlPlugin;

html模板

dear webpack

here

hi

效果