webpack 多页面 html,html-webpack-plugin 多页面应用打包

有些时候我们并不想用框架，就是传统的多页面应用，而html-webpack-plugin对此的支持并不好，所以需要我们多做一些工作。

1.构造webpack的entry对象

首先public/pages下每个子目录的都包含一个js、html、scss文件，其中所有js文件都是入口，所以我们使glob模块，找到所有js文件的路径和名称，进而构造出webpack的entry对象。const glob = require('glob');

let entry = function (){

let entry = {};

glob.sync('./public/pages/**/*.js').map(e=>{

const name=e.split('/')[3].replace('.js','');

if(name)entry[name]=e;

});

return entry;

}();

2.构造HtmlWebpackPlugin对象

由于HtmlWebpackPlugin不支持类似[name]的语法，所以我们必须为每个页面都构造一个HtmlWebpackPlugin对象。这里我们仍然利用entry对象获得文件名称和路径。最后我们把得到的结果合并到plugins数组中。let HtmlWebpack=[];

Object.entries(entry).forEach(e=> {

if(e[0]!=='global'){

HtmlWebpack.push(new HtmlWebpackPlugin({

chunks: ['global', e[0]],

filename: `${e[0]}.html`,

template: e[1].replace('.js','.html')

}));

}

});

plugins:[].concat(HtmlWebpack);

此外html-webpack-plugin也能够解析ejs等模版文件，所以我们也可以把公共模块单独抽出来，然后以模版形式导入，便于维护。