基于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

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

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