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

一、解决什么问题

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

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

二、多入口代码实现

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

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

　　

 

 三、多htmlWebpackPlugin插件代码实现

 1 //插入htmlWebpackPlugin
 2  (function(){
 3     //取得配置的入口key
 4     const entryObj = getEntry();
 5     //存储路径和chunks
 6     const htmlArray = [];
 7     for(let key in entryObj){
 8         htmlArray.push({
 9             html: key,
10             chunks: ['vendor', 'common', key]
11         })
12     }
13     //自动生成html模板
14     htmlArray.forEach((element) => {
15         module.exports.plugins.push(new htmlWebpackPlugin(getHtmlConfig(element.html, element.chunks)));
16     });
17  })();

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

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

　　注释掉原来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

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

 

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