编写一个应用于mpa场景下的webpack插件

场景：

在构建一些可扩展性可配置性更高的多页应用时，我们需要用html-webpack-plugin去灵活的将自己页面组件的js插入对应的模版。webpack的并没有提供这样的插件。

实现：

webpack提供一些生命周期可以被调用，所以我们可以编写插件来拦截最后生成的html，控制js、css等资源文件的插入位置。

代码示例：

// 定义一个webpack插件名
const pluginName = 'HtmlAfterWebpackPlugin'

let assetsHelp = (data) => {
     
    let js = []
    let css = []
    let dir = {
     
        js: item => ``,
        css: item => `${
       item}">`
    }
    for(let item of data.js) {
     
    	js.push(dir.js(item))
    }
    for(let item of data.css) {
     
    	css.push(dir.css(item))
    } 
    return {
     
        js,
        css
    }
}
// 封装插件
class HtmlAfterWebpackPlugin {
     
	apply(compiler) {
     
		compiler.hooks.compilation.tap(pluginName, compilation => {
     
            // htmlPluginData是webpack打包的所有chunks
			compilation.hooks.htmlWebpackPluginAfterHtmlProcessing.tap(pluginName, htmlPluginData => {
     
			// 这里需要取到swig模版,然后完成模版里对js和css文件的替换插入
                let _html = htmlPluginData.html
                const result = assetsHelp(htmlPluginData.assets)
                _html = _html.replace(/pages:/g, "../../")
                _html = _html.replace(/components:/g, "../../../components/")
                _html = _html.replace("", result.js.join(""))
                _html = _html.replace("", result.css.join(""))
                htmlPluginData.html = _html
			})
		}) 
	}
}
module.exports = HtmlAfterWebpackPlugin

注意：要在htmlwebpackplugin调用执行完再调用该插件。