WebPack学习-管理多个单页应用,构建同构应用,构建Electron应用,构建npm模块,构建离线应用,npm script检查代码,通过nodejs启动web

3-10 管理多个单页应用

引入问题
上一节3-9为单页应用生成HTML中只生成了一个 HTML 文件,但在实际应用中一个完整的系统不会把所有的功能都做到一个网页中,因为这会导致这个网页性能不佳。 实际的做法是按照功能模块划分成多个单页应用,每个单页应用生成一个 HTML 文件。并且随着业务的发展更多的单页应用可能会逐渐被加入到项目中去。

虽然上一节已经解决了自动化生成 HTML 的痛点,但是手动去管理多个单页应用的生成也是一件麻烦的事情。 来继续改造上一节的例子,要求如下:

项目目前共有2个单页应用组成,一个是主页 index.html,一个是用户登入页 login.html;
多个单页应用之间会有公共的代码部分,需要把这些公共的部分抽离出来,放到单独的文件中去以防止重复加载。例如多个页面都使用一套 CSS 样式,都采用了 React 框架,这些公共的部分需要抽离到单独的文件中;
随着业务的发展后面可能会不断的加入新的单页应用,但是每次新加入单页应用不能去改动构建相关的代码。
在开始前先来看看该应用最终发布到线上的代码。

login.html 文件内容:

<html>
<head>
<meta charset

猜你喜欢

转载自blog.csdn.net/weixin_43428283/article/details/128319340