基于webpack实现多html页面开发框架四 自动写入多入口，自动插入多个htmlWebpackPlugin插件

一、解决什么问题

     1、手写页面多入口，一个一个输入太麻烦，通过代码实现

     2、手写多个htmlWebpackPlugin插件太麻烦，通过代码实现

二、多入口代码实现

//读取所有.js文件,动态设置多入口
function getEntry() {
var entry = {};
//读取src目录下page下的所有.js文件
glob.sync('./src/pages/**/*.js')
.forEach(function (name) {
let start = name.indexOf('src/') + 10,
end = name.length - 3;
let n = name.slice(start, end);
let key = n.slice(0, n.lastIndexOf('/')); //保存各个组件的入口
// console.log(key);
entry[key] = name;
});
return entry;
};

　　修改module.exports的入口entry，注释掉原来手写的代码，改成上面的方法如下：

 三、多htmlWebpackPlugin插件代码实现

//插入htmlWebpackPlugin
(function(){
//取得配置的入口key
const entryObj = getEntry();
//存储路径和chunks
const htmlArray = [];
for(let key in entryObj){
htmlArray.push({
html: key,
chunks: ['vendor', 'common', key]
})
}
//自动生成html模板
htmlArray.forEach((element) => {
module.exports.plugins.push(new htmlWebpackPlugin(getHtmlConfig(element.html, element.chunks)));
});
})();

module.exports.plugins是配置文件当中的plugins数组，getHtmlConfig方法主要是返回htmlWebpackPlugin的配置，代码如下：

// 设置html-webpack-plugin参数，返回参数对象
let getHtmlConfig = function (name, chunks) {
var _template = `./src/pages/${name}/index.html`;
var _filename = `${name}/index.html`;
//index单独处理
if (name === "index") {
_filename = `index.html`;
}
let config = {
template: _template,
filename: _filename,
// favicon: './favicon.ico',
// title: title,
inject: true, //设置为true插入的元素放入body元素的底部
hash: true, //开启hash  ?[hash]
chunks: chunks,
minify: process.env.NODE_ENV === "development" ? false : {
removeComments: true, //移除HTML中的注释
collapseWhitespace: true, //折叠空白区域 也就是压缩代码
removeAttributeQuotes: true, //去除属性引用
}
};
return config;
};

　　注释掉原来module.exports.plugins配置当中手写的HtmlWebpackPlugin

四、测试

　　1、在src中的pages目录当中新建index2文件夹，下面新建index.js和index.html

      2、运行webpack命令查看效果，如下图：

 五、实现思路

　　1、入口以文件的目录为key，js文件的具体路径为值

      2、根据入口文件的key拼接.html文件模板路径，key直接作为chunks的值

      3、往module.exports.plugins的数组中插入HtmlWebpackPlugin对象

源码地址：https://github.com/James-14/webpack4_multi_page_demo

写的不对之处请大家批评指正~~~~!!!!!! 

文章原创，转载请注明出处，谢谢！