回顾

上篇文章我们打包了一个detail出口文件的所要做的事情：先在配置文件里去设置入口，然后在插件里new 一个HtmlWebpackPlugin并进行配置。_这只是一个，如果还有其他的文件需要打包处理呢，比如login、index这两个文件，如果也做打包处理，按照上面打包detail的步骤再来2遍，打包三个，我们需要这样重复3次，是不是太累了？如果文件很多，都要一个一个这样添加吗？_当然有解决方案。我们可以自己写一个方法去解放上面手动添加的烦恼，也就是 多页面打包的通用方案

手写多页面打包的通用方案

我们知道，要添加一个出口页面，我们需要执行的操作是：

1.先在配置文件里去设置入口文件。
2.插件里new 一个HtmlWebpackPlugin并进行配置。

新建一个 配置文件

为了方便查看，我们重新建一个配置文件webpack.test.config.js,想要此文件生效，我们记着一定要在package.json这样设置：

就OK了，生成的文件如下：

手写代码

我们再来写一下webpack.test.config.js中的代码：

先分析一波

**首先我们先把webpack.config.js中的代码复制过来，然后代码里面新增一个runTest方法，它会返回我们想要的2个重要数据；****里面定义两个变量分别是出口js文件合集的entrys变量，它是一个对象，我们先初始化为一个空对象，另一个是出口多页面的一个集合htmlwebpackplugins变量，它是一个数组，我们先初始化为一个空数组；**然后把这两个变量返回，最后调用runTest方法并通过解构拿到entrys, htmlwebpackplugins变量；代码如下：

function runtest(){var entrys={},htmlwebpackplugins=[];return {entrys,htmlwebpackplugins}
}
const {entrys,htmlwebpackplugins}=runtest();

至于为什么要把出口 js 文件定义成一个对象，而把多页面出口文件定义成一个数组，我们可以看下面原先的配置是这样的：

所以我们这样写：

上代码

我们回过头来继续填充runTest方法里面的代码，直接上代码如下：

var glob=require('glob');
function runtest(){var entrys={},htmlwebpackplugins=[];const entryFiles = glob.sync(path.join(__dirname, "./src/*/index.js"));console.log('==============>',entryFiles);entryFiles.map((item,index)=>{ letmatch=item.match(/src/(.*)/index.js/); console.log('match=====>',match); let pageName=match[1]; entrys[pageName]=item;htmlwebpackplugins.push( new HtmlWebpackPlugin({ // "./src/index.html" template: `./src/${pageName}.html`, // "index.html" filename: `${pageName}.html`, chunks:[pageName] } ), )})return {entrys,htmlwebpackplugins}
}
const {entrys,htmlwebpackplugins}=runtest();

分析代码

分析一波这段代码：

entry: {index: './src/index.js',list: './src/list.js',detail:'./src/detail/index.js',
},

首先我们看一下原先entry里面对象里的每一项，分别是一个chunks的键名key也就是属性名，value是对应的入口文件路径。

所以我们再分析上述runTest里面的代码：先定义两个变量分别存放入口文件的集合的entrys变量和存放多页面集合的htmlwebpackplugins变量。然后，**path.join()是拼接路径，参数./src/*/index.js就是路径片段，这里*是通配符所有任意字符的意思；**比如可以匹配到./src/index/index.js、./src/detail/index.js、./src/login/index.js等都是可以匹配到的。然后glob.sync是可以返回找到与模式匹配的所有文件名。返回的值如下：

npm install glob

关于glob.sync的详情官网文档资料如下： <img src=“https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/311d04b724df46a4a0813437eaa253cf~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)[具体glob文档链接](https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fisaacs%2Fnode-globl “https://github.com/isaacs/node-globl”” style=“margin: auto” />

path.join具体详情官方资料：

path其他详情看这里，官方文档

再继续往下看，**我们用math+正则去查找每项对应的字符信息；**使用正则时，遇到特殊字符就要用\进行转义， .:匹配除换行符 \n 之外的任何单字符， *：匹配前面的子表达式零次或多次；我们用变量math接受到了查找到的符合条件的所有信息的数组。

看下打印结果：

我们用变量pageName去保存chunks的值;然后把每项的值保存在entry里；最后再往htmlwebpackplugins去push值，里面都用到了pageName的值，事实上，多页面配置里面也就这个变量的值不同，其他都一样；最后，就是把这个entrys、htmlwebpackpluginsreturn出去；

看成果

以上代码就算是写完了，最后我们需要把打包的文件名改成test,为了和之前的dist区分开，代码如下：webpack.test.config.js:

构建成功后，目录下新增了一个test的目录，里面的文件就是我们打包所需的文件，

javascript webpack webpack webpack 前端前端前端前端

webpack里手写一个多页面打包的通用方案

回顾

手写多页面打包的通用方案

新建一个 配置文件

手写代码

先分析一波

上代码

分析代码

看成果

相关文章