背景随着react、vue、angular这三大前端框架在前端领域站稳脚跟，SPA应用正被应用到越来越多的项目中。但是在一些特殊的应用场景下，需要使用传统的多页面应用。在使用webpack进行项目工程建设时，也需要做相应的调整。与SPA应用的区别在SPA应用中，使用webpack构建项目后，会生成一个html文件，几个js文件，几个css文件。在html文件中，引用了所有的js和css文件。\在多页面应用中，使用webpack构建项目后，会生成多个html文件、多个js文件、多个css文件。在每个html文件中，只引用了页面对应的js和css文件。webpack配置入口设置多页应用打包会对应多个入口js文件和多个html模板文件。假设我们开发状态下的多页目录是这样的：|--page1|--index.html|--index.js|--index.less|--page2|--index.html|--index.js|--index.less包含page1和page2两个页面，以及它们对应的js和less文件。那么在使用webpack构建项目时，有两个入口文件page1->index.js和page2->index.js，以及两个模板文件page1->index.html和page2->index.html。但是，在构建项目时，不可能为每个页面都指定一个入口配置。\要自动匹配所有页面条目和模板文件，有两种方法。\\方法一：使用node的fs文件系统。读取父文件夹下的所有子文件夹。所有页面都自动匹配文件夹名称。不过这种方法需要保持父文件夹下的文件干净。否则，需要使用特定的判断逻辑来过滤掉所有的入口目录。\\方法二：通过配置文件配置入口。例如：entry:['page1','page2'];这样就可以准确指定所有的入口目录。但是，每添加一个页面，都需要更改配置文件。\两种方法各有特点，可根据具体情况选用。具体配置入口entry的配置需要根据我们获取到的入口数据循环添加。constentryData={};entry.forEach(function(item){entryData[item]=path.join(__dirname,`../src/pages/${item}/index.js`);})输出配置与SPA一致应用程序，不需要特殊配置。output:{filename:'public/[name]_[chunkhash:8].js',path:path.join(__dirname,`../dist/`),publicPath:'/'},HtmlWebpackPlugin使用webpack构建小时。您需要使用html-webpack-plugin插件来生成项目模板。对于需要生成多个模板的多页面应用，也需要生成多个html模板文件。同理，利用获取到的入口文件数据加入循环。constHtmlWebpackPlugin=require('html-webpack-plugin');constHtmlWebpackPluginData=[];entry.forEach(function(item){HtmlWebpackPluginData.push(newHtmlWebpackPlugin({文件名：`${item}.html`，模板：path.join(__dirname,`../src/pages/${item}/index.html`),chunks:[item]}));})chunks必须在配置中配置，如果不配置，则将每个js和css文件都导入到模板文件中。如果在条目中指定为配置名称，则只导入与条目相关的文件。配置组合接下来就是将前面的entry、output、htmlWebpackPlugin配置进行组合。其他配置与SPA应用一致，无需单独处理。组合如下modules.exports={entry:{...entryData},output:{filename:'public/[name]_[chunkhash:8].js',path:path.join(__dirname,`../dist/`),publicPath:'/'},plugins:[...HtmlWebpackPluginData]...}完整的demo可以查看多页应用demo
