webpack多入口js如何打包到相对应 的html文件里面？

问题描述

问 题

项目中需要使用多页面应用，目录结构如下，怎么把pageA.js打包到pageA.html里面，pageB.js打包到pageB.html里面？而现在我的问题是pageA.js和pageB.js都打包到了pageA.html和pageB.html里面了，求大神指导，在线等！！！

如：
.
├── package.json # 项目配置
├── src # 源码目录
│ ├── pageA.html # 入口文件a
│ ├── pageB.html # 入口文件b
│ ├── css/ # css资源
│ ├── img/ # 图片资源
│ ├── js # js&jsx资源
│ │ ├── pageA.js # a页面入口
│ │ ├── pageB.js # b页面入口
│ │ ├── lib/ # 没有存放在npm的第三方库或者下载存放到本地的基础库，如jQuery、Zepto、avalon
│ ├── pathmap.json # 手动配置某些模块的路径，可以加快webpack的编译速度
├── webpack.config.js # webpack配置入口

解决方案

要使用到html-webpack-plugin这个插件，chunks就是你在entry定义的入口的key，下图的代码是手动写了两个，你也可以写在另外一个文件里，然后forEach()循环出来

这篇关于webpack多入口js如何打包到相对应 的html文件里面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！