webpack对html模板的处理

一、打包html模板到相应目录并且引入js

需要安装

html-webpack-plugin

然后在plugins里实例化

new HtmlWebpackPlugin({
template:'./src/view/index.html',
filename:'view/index.html',
chunks:['common','index']//需要打包的在页面引入的js

}),

但是多个页面的时候则需要封装一个方法传入

var getHtmlConfig = function(name, title){
    return {
        template    : './src/view/' + name + '.html',
        filename    : 'view/' + name + '.html',
        favicon     : './favicon.ico',
        title       : title,
        inject      : true,
        hash        : true,
        chunks      : ['common', name]
    };

调用时

new HtmlWebpackPlugin(getHtmlConfig('index', '首页')),

二、引用相同html模板，先安装html-loader，因为这个插件支持ejs语法因此可以直接使用

<%= require('html-loader!./include/html-header.html')%>