和传统的单页面应用打包差别，多页面应用实在就是设置多个入口，天生多个bundle。
下面就来看看详细应该怎么操纵吧
这是官方提供的示例，可以看到，entry变成了一个对象，而内里每一个键值对则就对应了我们每一个终极天生的bundle。文档所在：https://www.webpackjs.com/concepts/entry-points/#separate-app-and-vendor-entries
实在还好坏常简单的，原理上来说就是设置多个入口文件，使webpack天生多个依靠关系，从而构建出多个bundlejs。如许我们在差别的html文件引入对应的bundle就行了。
但是有一个题目，如许的设置我们每增长一个子页面都必要去写一个entry的键值对，非常的贫困。那有没有什么办法可以一次性获取到这些子页面然后主动天生entry呢？
答案是有的，借助glob这个库就可以完成。
glob这个库有个sync的方法，可以获取指定路径下的全部文件，有了这个我们不就可以一次性拿到全部的子页面了嘛。下面一起来看看详细操纵吧
起首下载以下这个库
npm i glob -Dconst setMPA = ()=>{ const entry = {} const htmlWebpackPlugin = [] const entryFile = glob.sync('./pages/*/main.js') entryFile.forEach((filePath,index)=>{ //根据获取到的路劲天生多入口entry对象 const entryName = filePath.split('/pages/')[1].split('/main.js')[0] entry[entryName] = filePath //接着天生每个入口的html模板 htmlWebpackPlugin.push( new HtmlWebpackPlugin({ filename: `${entryName}.html`, template: path.resolve(__dirname,`./pages/${entryName}/public/index.html`), chunks: [entryName], //只打入指定的chunks，否则的话webpack会将全部bundle都引入 inject: true,//设置全部js资源放置在html得哪个位置 minify:{ //压缩设置 collapseWhitespace: true, preserveLineBreaks:false, html5:true, minifyCSS:true, minifyJS:true, removeComments: true, } }) ) }) return{ entry, htmlWebpackPlugin }}有了这个函数，就能拿到最新的entry以及最新的htmlWebpackPlugin设置。
目次结构如下
下面来看看结果
|
