深入浅出webpack学习(15)--管理多个单页应用
在实际应用中一个完整的系统不会把所有的功能都做到一个网页中,因为这会导致网页性能不佳。实际的做法是按照功能模块划分成多个单页应用,每个单页应用生成一个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文件作为入口执行文件。
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 都会自动为你完成,你不用操心,明白大致原理即可。
相关推荐
不知道该写啥QAQ 2020-11-12
webfullStack 2020-11-09
Yvettre 2020-09-15
想做大牛的蜗牛 2020-10-30
gloria0 2020-10-26
gaojie0 2020-09-11
SelinaChan 2020-08-14
不知道该写啥QAQ 2020-08-09
gloria0 2020-08-09
不知道该写啥QAQ 2020-08-02
hline 2020-07-29
SelinaChan 2020-07-28
wangdianyong 2020-07-23
webpackvuees 2020-07-23
yqoxygen 2020-07-20
不知道该写啥QAQ 2020-07-18
waterv 2020-07-18
81463166 2020-07-17