webpack的多页面开发配置-CSDN博客

此处主要只讲多页面的相关配置，其他部分的配置没有涉及

当有多个页面需要webpack打包时，就需要编写多个new HtmlWebpackPlugin的配置，两三个页面不嫌麻烦的话，尚可以接受，但是有七八个甚至十几个页面时，这样的编写配置方式，就显得非常的麻烦

- 下面介绍的就是简化配置方式，实现一劳永逸的配置方式

首先我这边的配置思路就是一个页面对应一个js，其余的js为common插件形式，所以不需要script方式引入，而是在使用时直接用es6语法import使用

需要根据多页面来更改的配置主要有两个地方：

entry的入口文件
plugins中的HtmlWebpackPlugin

所以我们需要动态的获取这两个配置：这边使用到一个node的插件glob,安装方式
npm install glob --save-dev
用法：

var glob = require("glob")
 
// options is optional
glob("**/*.js", options, function (er, files) {
  // files is an array of filenames.
  // If the `nonull` option is set, and nothing
  // was found, then files is ["**/*.js"]
  // er is an error object or null.
})
复制代码

大体就是可以根据路径以及后缀，输出所有符合的文件路径，具体文档参考：npm

所以利用这个方式可以获取到我们所有的需要打包页面，下面是具体的代码：

function getFiles(htmlPath, jsPath) {
    let files = glob.sync(htmlPath);//获取html的所有路径
    let file_js = glob.sync(jsPath);//获取js的所有路径
    let htmls = [],
        entry, dirname, basename, pathname, extname;
    jss = {}, name = []

    files.forEach(item => {
        entry = item;
        dirname = path.dirname(entry); //当前目录
        extname = path.extname(entry); //后缀
        basename = path.basename(entry, extname); //文件名
        pathname = path.join(dirname, basename); //文件路径
        if (extname === '.html') {
            htmls.push({
                path: entry,
                name: basename
            })//把获取到的html已经对应的文件名push到数组中
            name.push(basename)//把对应的文件名另外存放一份，后面加载js时用
        }
    });
    file_js.forEach(item => {
        entry = item;
        dirname = path.dirname(entry); //当前目录
        extname = path.extname(entry); //后缀
        basename = path.basename(entry, extname); //文件名
        pathname = path.join(dirname, basename); //文件路径
        if (extname === '.js') {//筛选js文件
            if (name.indexOf(basename) > -1) {//根据前面保存的html文件名来选择加载js，因为我们是一个html对应一个js的
                jss[basename] = entry;
            }
        }
    });
    return {//最后把处理完成的数据return出去
        htmls,
        jss
    };
})
复制代码

上面介绍的是多文件的自动处理，接下来就用处理完成的数据来配置webpack：

entry:files.jss //files是我们用上面函数处理后接收的数据变量，jss为retrun出来的js入口配置

复制代码

下面是plugins部分的html配置：

 plugins: files.htmls.map((item, index) => {
            return new HtmlWebpackplugin({//下面是HtmlWebpackPlugin的详细配置
                template: item.path,//html的路径文件
                filename: item.name + '.html',//html的具体文件名
                minify: true,
                hash: process.env.NODE_ENV === 'production',
                chunks: [item.name]//对应加载的js，因为我们使用的html和js同名来相会对应实现自动配置的
            })
        })
复制代码

以上就是webpack多页面的自动配置的全部设置方式 ps:该配置写的比较繁琐，感觉不是很简洁，有大佬有好的方法，望指点

参考文章