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

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

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