深入浅出webpack学习(15)--管理多个单页应用

iamyoung001 发布于2019-08-22 15:25 / 2913人阅读

摘要：实际的做法是按照功能模块划分成多个单页应用，每个单页应用生成一个文件。随着业务的发展，后面可能会不断的加入新的单页应用，但是每次新加入单页应用不能去改动构建相关的代码。并且分别为每个单页应用生成一个配置和配置。

在实际应用中一个完整的系统不会把所有的功能都做到一个网页中，因为这会导致网页性能不佳。实际的做法是按照功能模块划分成多个单页应用，每个单页应用生成一个HTML文件。之前我们解决了自动化生成HTML文件，接下来继续改造上一节的例子：

项目目前共有两个单页应用组成，一个是主页index.html, 一个是login.hml

多个单页应用之间会有公共代码部分，需要将这些公共代码部分抽离出来放到多带带的文件中防止重复加载。

随着业务的发展，后面可能会不断的加入新的单页应用，但是每次新加入单页应用不能去改动构建相关的代码。

按照上节的思路，可能要为每个单页应用配置一段如下代码：

new WebPlugin({
    template: "./template.html", //HTML模板文件所在的文件路径
    file: "login.html" //输出的HTML的文件名称
})

并且把页面对应的入口加入到entry配置项中，就像这样：

entry: {
    index: "./page/index/index.js", //页面index.html的入口文件
    login: "./page/login/index.js"， //页面login.html的入口文件
}

当有新页面加入时就需要修改webpack配置文件，新插入一段以上代码，这会导致构建代码难以维护并且易错。

解决方案

上一节中的web-webpack-plugin插件也内置了这个解决办法，上一节只用了他的webPlugin，这节将使用它的AutoWebPlugin来解决以上问题。
项目源码结构如下：

├── pages
│   ├── index
│   │   ├── index.css // 该页面多带带需要的 CSS 样式
│   │   └── index.js // 该页面的入口文件
│   └── login
│       ├── index.css
│       └── index.js
├── common.css // 所有页面都需要的公共 CSS 样式
├── google_analytics.js
├── template.html
└── webpack.config.js

从目录结构中可以看出以下几点要求：

所有单页应用的代码都需要放到一个目录下：例如pages目录下；

一个单页应用一个多带带的文件夹，例如最后胜出index.html相关的代码都在index目录下

每个单页应用的目录下都有一个index.js文件作为入口执行文件。

虽然 AutoWebPlugin 强制性的规定了项目部分的目录结构，但从实战经验来看这是一种优雅的目录规范，合理的拆分了代码，又能让新人快速的看懂项目结构，也方便日后的维护。

webpack配置文件修改如下：

const { AutoWebPlugin } = require("web-webpack-plugin")

// 使用本文的主角 AutoWebPlugin，自动寻找 pages 目录下的所有目录，把每一个目录看成一个单页应用
const autoWebPlugin = new AutoWebPlugin("pages", {
  template: "./template.html", // HTML 模版文件所在的文件路径
  postEntrys: ["./common.css"],// 所有页面都依赖这份通用的 CSS 样式文件
  // 提取出所有页面公共的代码
  commonsChunk: {
    name: "common",// 提取出公共代码 Chunk 的名称
  },
});

module.exports = {
  // AutoWebPlugin 会为寻找到的所有单页应用，生成对应的入口配置，
  // autoWebPlugin.entry 方法可以获取到所有由 autoWebPlugin 生成的入口配置
  entry: autoWebPlugin.entry({
    // 这里可以加入你额外需要的 Chunk 入口
  }),
  plugins: [
    autoWebPlugin,
  ],
};

AutoWebPlugin会找出pages目录下的2个文件夹index和login，把这两个文件夹看成两个单页应用。并且分别为每个单页应用生成一个Chunk配置和WebPlugin配置。每个单页应用的Chunk名称就等于文件夹的名称，也就是说autoWebPlugin.entry()方法返回的内容其实是：

{
  "index":["./pages/index/index.js","./common.css"],
  "login":["./pages/login/index.js","./common.css"]
}

但这些事情 AutoWebPlugin 都会自动为你完成，你不用操心，明白大致原理即可。

混合云私有云深入浅出webpack 单页应用单页应用cdn 单页应用程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93452.html

Vue.js新手入门指南[转载]

摘要：就是一个用于搭建类似于网页版知乎这种表单项繁多，且内容需要根据用户的操作进行修改的网页版应用。单页应用程序顾名思义，单页应用一般指的就是一个页面就是应用，当然也可以是一个子应用，比如说知乎的一个页面就可以视为一个子应用。最近在逛各大网站，论坛，以及像SegmentFault等编程问答社区，发现Vue.js异常火爆，重复性的提问和内容也很多，楼主自己也趁着这个大前端的热潮，着手学习了一...

MartinHan 2019-08-23 11:50 评论0 收藏0
专治前端焦虑的学习方案

摘要：不过今天我希望能够更进一步，不仅仅再抱怨现状，而是从我个人的角度来给出一个逐步深入学习生态圈的方案。最后，我还是想提到下对于的好的学习方法就是回顾参照各种各样的代码库，学习人家的用法与实践。本文翻译自A-Study-Plan-To-Cure-JavaScript-Fatigue。笔者看到里面的几张配图着实漂亮，顺手翻译了一波。本文从属于笔者的Web Frontend Introduc...

codeGoogle 2019-08-21 14:41 评论0 收藏0
前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
3月份前端资源分享

摘要：面试如何防骗一份优秀的前端开发工程师简历是怎么样的作为，有哪些一般人我都告诉他，但是他都不听的忠告如何面试前端工程师更多资源请Star：https://github.com/maidishike... 文章转自：https://github.com/jsfront/mo... 3月份前端资源分享 1. Javascript 使用judge.js做信息判断 javascript...

nanchen2251 2019-08-21 15:21 评论0 收藏0
2017年3月份前端资源分享

平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 03月份前端资源分享 1. Javascript 175453545 Redux compose and middleware 源码分析深入 Promise(二)——进击的 Promise Effective JavaScript leeheys blog -...

ermaoL 2019-06-27 16:30 评论0 收藏0