在使用 ES6 + webpack 的情况下，怎么组织多页面应用（非 SPA）？

Question

需求描述先看文件目录 . ├── entry.js // webpack 的 entry 入口文件├── article // 文章模块│   ├── article.js│   └── article.html└── product  // 产品模块     ├── product.js     └── product.htmlTips: 这个项目没有用到 react 或 vue 等前端框架。一共两个模块，文章 article 和 产品 product，对应的文件是：article.js 文章里面有很多函数，如 aFn()，最后都会 export default 出去。product.js 产品里面也有很多函数，如 pFn()，最后都会 export default 出去。预期访问 URL /article 执行 article.js 中的代码。 访问 /product 时执行 product.js 的代码。一些我能想到的方案和问题在 entry.js 中 import p.js 和 a.js，然后分别调用，业务代码都写在 entry.js 中。这个方法的缺点是 entry.js 会变很大，很面条。让 webpack 编译多个 js，在 article.html 中加载 article.js，在 product.html 中加载 product.js，这样最好，但是需要手动控制，而且 js 文件太多，请求次数太多，拖慢速度。用 if 判断 URL（或 DOM 中的 className），然后决定执行哪些 js 代码。想了很多方案，但没有明确答案到底那个好。其实想问的是 在使用 ES6 + webpack 的情况下，怎么组织多页面应用（非 SPA）？