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

Question

需求描述

先看文件目录
.
├── entry.js // webpack 的 entry 入口文件
├── article // 文章模块
│   ├── article.js
│   └── article.html
└── product // 产品模块
    ├── product.js
    └── product.html

Tips: 这个项目没有用到 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）？

Answer 1

让 webpack 编译多个 js，在 article.html 中加载 article.js，在 product.html 中加载 product.js，这样最好，但是需要手动控制，而且 js 文件太多，请求次数太多，拖慢速度。

必须是这个。

• 首先，只要你用webpack来生成/管理html文件，那么webpack是会自动帮你插入入口文件的。

• 对比起SPA来说，最简单的情况也只不过是每个页面读多1个js文件而已，不用太在意啦。

详细请参考我的系列文章：《webpack多页应用架构系列》

Answer 2

推荐这篇文章 基于webpack的前端工程化开发之多页站点篇（二）

Answer 3

我页遇到类似需求，跟楼主有些相似

我这边的场景是：每个月我们有会有几个活动页开发，我这边设计的时候就是目录会根据业务来区分

每个新建一个目录，每次活动有自己的目录，这个活动目录下可以有多个页面

为此特地写了个项目模板，webpack多页面项目模板 可以参考下

Answer 4

@array_huang 非常感谢指点，后来我的确是这样一个 module 生成 一个 js，不过在解决问题的时候又遇到了新的问题。 在 webpack 中利用 ExtractTextPlugin 合并的 CSS 并不完整，为什么有些 CSS 代码没有合并进来？ https://segmentfault.com/q/10...