CN114020309B - 通过webpack构建多页面应用的方法、装置及存储介质 - Google Patents

Abstract

本发明实施例公开了一种通过webpack构建多页面应用的方法、装置及存储介质。该方案可以遍历所有页面并检索出页面对应的多个入口文件，获取通过预设插件配置出来的全部页面文件，通过webpack的预设函数获取页面文件的页面信息，并将页面信息与入口文件进行关联，根据关联结果将入口文件与页面文件进行打包，生成目标页面文件。本申请实施例所提供的方案可以自动遍历入口文件并与页面文件打包，利用webpack来构建多页面应用，从而在自动化部署时避免前后端更新不同步的问题。

Description

通过webpack构建多页面应用的方法、装置及存储介质

技术领域

本发明涉及数据处理技术领域，具体涉及一种通过webpack构建多页面应用的方法、装置及存储介质。

背景技术

单页面应用(Single Page Web Application，SPA)是指只有一个主页面的应用程序，可以通过加载单个超文本标记语言(Hyper Text Markup Language，HTML)页面并在用户与应用程序交互时动态更新该页面。所有的内容都包含在主页面，页面跳转仅刷新局部网页资源，公共资源(层叠样式表和脚本语言(JavaScript)等)仅需加载一次，常用于网站。而多页面应用(Multiple Page Web Application，MPA)包括很多个HTML文件，每个页面必须重复加载公共资源等。多页应用跳转，需要整页资源刷新，常用于应用程序或客户端等。

在实际使用过程中，常常通过传统的MVC思想项目架构来对多页面应用进行开发，MVC是一种经典的设计模式，全名为Model-View-Controller，即模型-视图-控制器。然而申请人发现，在这种开发模式当中前端和后端都在一个项目里开发时会导致自动化部署的时候前后端更新不同步的问题。

发明内容

本发明实施例提供一种通过webpack构建多页面应用的方法、装置及存储介质，可以利用webpack来构建多页面应用，从而在自动化部署时避免前后端更新不同步的问题。

本发明实施例提供一种通过webpack构建多页面应用的方法，包括：

遍历所有页面并检索出所述页面对应的多个入口文件；

获取通过预设插件配置出来的全部页面文件；

通过所述webpack的预设函数获取所述页面文件的页面信息，并将所述页面信息与所述入口文件进行关联；

根据关联结果将所述入口文件与所述页面文件进行打包，生成目标页面文件。

本发明实施例还提供一种通过webpack构建多页面应用的装置，包括：

遍历单元，用于遍历所有页面并检索出所述页面对应的多个入口文件；

获取单元，用于获取通过预设插件配置出来的全部页面文件；

关联单元，用于通过所述webpack的预设函数获取所述页面文件的页面信息，并将所述页面信息与所述入口文件进行关联；

打包单元，用于根据关联结果将所述入口文件与所述页面文件进行打包，生成目标页面文件。

本发明实施例还提供一种存储介质，所述存储介质存储有多条指令，所述指令适于处理器进行加载，以执行本发明实施例所提供的任一通过webpack构建多页面应用的方法。

本发明实施例提供的音频处理方案，可以遍历所有页面并检索出页面对应的多个入口文件，获取通过预设插件配置出来的全部页面文件，通过webpack的预设函数获取页面文件的页面信息，并将页面信息与入口文件进行关联，根据关联结果将入口文件与页面文件进行打包，生成目标页面文件。本申请实施例所提供的方案可以自动遍历入口文件并与页面文件打包，利用webpack来构建多页面应用，从而在自动化部署时避免前后端更新不同步的问题。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明实施例提供的通过webpack构建多页面应用的方法的第一种流程示意图；

图2是本发明实施例提供的加入BFF层后前后端之间的框架示意图；

图3是本发明实施例提供的BFF层与前端之间的框架示意图；

图4是本发明实施例提供的通过webpack构建多页面应用的方法的第二种流程示意图；

图5是本发明实施例提供的通过webpack构建多页面应用的装置的第一种结构示意图；

图6是本发明实施例提供的通过webpack构建多页面应用的装置的第二种结构示意图；

图7是本发明实施例提供的终端的结构示意图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素，此外，本申请不同实施例中具有同样命名的部件、特征、要素可能具有相同含义，也可能具有不同含义，其具体含义需以其在该具体实施例中的解释或者进一步结合该具体实施例中上下文进行确定。

应该理解的是，虽然本申请实施例中的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

需要说明的是，在本文中，采用了诸如101、102等步骤代号，其目的是为了更清楚简要地表述相应内容，不构成顺序上的实质性限制，本领域技术人员在具体实施时，可能会先执行102后执行101等，但这些均应在本申请的保护范围之内。

在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本发明的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。

本发明实施例提供一种通过webpack构建多页面应用的方法，该通过webpack构建多页面应用的方法的执行主体可以是本发明实施例提供的通过webpack构建多页面应用的装置，或者集成了该通过webpack构建多页面应用的装置的服务器，其中该通过webpack构建多页面应用的装置可以采用硬件或者软件的方式实现。

在描述本发明的技术方案之前，先对相关的技术术语进行简单解释：

BFF：Backends For Frontends(服务于前端的后端)，BFF就是服务器设计API时会考虑到不同设备的需求，也就是为不同的设备提供不同的API接口，虽然它们可能是实现相同的功能，但因为不同设备的特殊性，它们对服务端的API访问也各有其特点，需要区别处理。

SSR：Server Side Render(服务端渲染)，服务端渲染的模式下，当用户第一次请求页面时，由服务器把需要的组件或页面渲染成HTML字符串，然后把它返回给客户端。客户端拿到手的，是可以直接渲染然后呈现给用户的HTML内容，不需要为了生成DOM内容自己再去跑一遍JS代码

webpack：Webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

entry：入口文件，应用程序所有http请求都由某一个文件接受并由这个文件转发到功能代码中，也即入口文件。

如图1所示，图1是本发明实施例提供的通过webpack构建多页面应用的方法的第一流程示意图，该通过webpack构建多页面应用的方法的具体流程可以如下：

101、遍历所有页面并检索出页面对应的多个入口文件。

在本申请实施例中，上述通过webpack构建多页面应用是基于BFF架构的，BFF可以针对不用业务场景来提供对应的服务接口，每一种业务场景之间完全独立。BFF就是后端服务与前端间加一适配层：提供对前端友好的接口。BFF做的具体的事包括：1、聚合后端服务。将多个接口聚合成一个，提升前端性能。2、数据裁剪。只返回不同端需要的数据，不返回多余数据。BFF只需支持GraphQL即可支持返回前端需要的数据形状。3、数据格式化。除了对后端接口的处理，BFF层还可以对前端html页面的性能优化，比如ssr(服务端渲染)。ssr(服务端渲染)需要前端页面配置成MPA(多页面应用)。

进一步的，BFF只是一种逻辑分层，而非一种技术。多个请求变成一个请求，让前端专注，而当有了BFF这一层时，就不需要考虑系统后端的迁移。后端发生的变化都可以在BFF层做一些响应的修改。举例来说，请参阅图2，图2是本发明实施例提供的加入BFF层后前后端之间的框架示意图，其中，RD指的是研发(Research and Development)，FE指的是前端(Front-End)，BFF前端架构思想不光可以聚合后端服务、数据剪裁和数据格式化，还可以在服务端建立路由(controllers)来指定前端的html，前端的静态文件利用webpack去编译。进一步的，请继续参阅图3，图3是本发明实施例提供的BFF层与前端之间的框架示意图。在图3中可以看出，每个controllers都会制定一个html模板，这样可以实现服务端渲染。

在一实施例中，页面入口文件用于指向页面应用数据包关联的其他文件，即页面入口文件中指定单页应用依赖的全部数据，或者指定多页应用中匹配的页面依赖的全部数据。针对单页面应用，仅需要配置一个页面入口文件。而针对多页面应用，各页面是相互独立的，每个页面需要一个页面入口文件。可选的，在本申请实施例中，上述页面类型为多页类型，相应的页面入口文件的数量为至少两个。

具体的，可以通过正则检索出所有html页面以及对应的入口文件，其中，可以通过glob模块查询多页面应用关联的全部页面入口文件。

需要说明的是，多页面应用类型中，需要通过glob函数查询全部页面入口文件并返回名称，单页面类型中，页面入口文件只有一个。outputDir表明输出到哪个文件中，单页面类型中，输出到out_spa，多页类型中，输出到out_multiple中。其中，页面入口文件通常命名为main.js，多个页面入口文件分别存放于不同的文件夹中，文件夹的名称不同，文件夹的名称即为页面的title。此外，还可以包括plugins，用于配置插件，例如，采用htmlWebpackPlugin创建html入口文件。具体可以根据需要进行设定，对此，本发明实施例不作进一步限制。

102、获取通过预设插件配置出来的全部页面文件。

在一实施例中，上述全部页面可以包括多个HTML页面，这里可以直接借助plugin插件中的html-webpack-plugin插件来实现，我们只需要多次实例化一个html-webpack-plugin的实例即可。其中plugin插件中html-webpack-plugin提供了利用entry(入口文件)生成一个新的html页面的方法。

需要说明的是，上述html-webpack-plugin插件的作用包括：1、为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题。2、可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口。

具体的，在使用html-webpack-plugin这个插件来自动生成html文件时，首先引入了所需的插件和变量，然后利用html-webpack-plugin循环生成html页面。html-webpack-plugin构造函数的参数包括：filename、template、以及chunks。其中filename用于生成的html文件名，在具体实施过程中可以和原始文件名保持一致。template用于生成html文件使用的模板，也就是之前在html文件夹中建立的那些文件。Chunks用于生成html文件时会自动插入相应的代码片段(也就是JavaScript文件)，具体可以选择插入每个页面对应的JavaScript文件，以及最后提取出来的公共文件代码块。

在一实施例中，上述页面文件也即为网页资源数据，具体可以包括超文本标记语言(Hyper Text Markup Language，HTML)文件、层叠样式表(Cascading Style Sheets，CSS)和脚本语言(JavaScript)代码。其中，HTML文件是网页内容的载体，通常是由标签组成。CSS用于描述网页元素的样式和布局，例如标题元素的字体、颜色、尺寸和标题背景图像等，其中，CSS可以包括独立的文件和/或嵌入在HTML文件中的代码。JavaScript代码用于实现用户与网页的动态交互操作，例如，鼠标点击配置项图标，配置项图标弹出下拉菜单等。

103、通过webpack的预设函数获取页面文件的页面信息，并将页面信息与入口文件进行关联。

在一实施例中，可以通过webpack的钩子函数来获取页面文件的页面信息。其中，钩子(Hook)是一种回调函数，钩子函数是在一个事件触发的时候，在系统级捕获到了他，然后做一些操作。也可以说是系统提供的一种机制，可以在信息到达其他进程之前将信息拦截和处理。

104、根据关联结果将入口文件与页面文件进行打包，生成目标页面文件。

webpack在打包时，会将入口文件中的JavaScript文件打包到某个目标文件中，在不考虑代码分割提取的情况下，一个入口文件会打包为一个目标文件，多个入口文件会打包为多个对应的目标文件。因此，在本申请实施例中可以将每个多页页面中的特有的JavaScript文件作为入口文件，在打包时将对应打包成不同的bundle文件，也即目标页面文件。

在多页面应用打包的应用场景中，需要在配置数据中指定多个页面入口文件，可以分别从多个页面入口文件开始，构建多页应用的依赖关系，形成多页面应用的数据包。

其中，上述页面应用数据包可以用于浏览器渲染页面并显示，或者页面应用数据包可以安装在电子设备中，生成客户端并显示。在其他实施例中页面应用数据包可以包括第三方程序依赖文件、工程代码依赖文件和业务代码依赖文件。

具体的，可以通过脚手架结合模块打包程序，实现根据配置数据，生成页面应用数据包。其中，脚手架用于开发应用程序代码，具体的，脚手架可以是预先搭建的应用程序的框架，可以将脚手架理解为各应用程序中重复性的代码抽离出来的代码。通过脚手架可以减少开发应用程序的重复性开发工作。模块打包程序用于将脚本语言(如JavaScript)文件打包在一起，打包后的文件用于在浏览器中使用。

进一步的，在生成目标页面文件后可以对其进行网页渲染，网页渲染过程可以是：对HTML文件进行解析，生成文档对象模型树(Document Object Model Tree，DOM Tree)；对CSS进行解析，生成CSS对象模型树(CSS Object Model Tree，CSSOM Tree)，其中，DOM Tree的结构与CSSOM Tree的结构对应；根据DOM Tree的结构与CSSOM Tree的结构的对应关系，对DOM Tree和CSSOM Tree进行合成，形成渲染树；计算渲染树中各节点的布局信息；根据渲染树中各节点的布局信息，对渲染树中各节点进行绘制，生成至少一个图层，各图层用于按照设定顺序合成，生成图像，在浏览器窗口中进行显示，形成一个完整的网页效果。

由上所述，本发明实施例提出的通过webpack构建多页面应用的方法可以遍历所有页面并检索出页面对应的多个入口文件，获取通过预设插件配置出来的全部页面文件，通过webpack的预设函数获取页面文件的页面信息，并将页面信息与入口文件进行关联，根据关联结果将入口文件与页面文件进行打包，生成目标页面文件。本申请实施例所提供的方案可以自动遍历入口文件并与页面文件打包，利用webpack来构建多页面应用，从而在自动化部署时避免前后端更新不同步的问题。

根据前面实施例所描述的方法，以下将作进一步详细说明。

请参阅图4，图4是本发明实施例提供的通过webpack构建多页面应用的方法的第二种流程示意图。所述方法包括：

201、在node js的应用程序接口中通过glob方法检索出含有entry.js的目标文件，并将上述目标文件确定为入口文件。

其中，Node.js是一个基于Chrome JavaScript运行时建立的平台，用于方便搭建响应速度快、易于扩展的网络应用。Node.js使用事件驱动，非阻塞I/O模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。npm为一个基于Node.js的包管理器，可以使用其中的各种基于Node.js的开源库。

相关环境和工具安装成功后，可以执行cmd命令，安装依赖包。因为webpack是一个开源的JavaScript模块包。webpack需要具有依赖关系的模块，并生成表示这些模块的静态资产。其需要依赖关系并生成一个依赖图，允许开发者使用模块化方法进行Web应用程序开发。

具体的，可以通过正则检索出所有html页面以及对应的入口文件，其中，可以通过glob模块查询多页面应用关联的全部页面入口文件。需要说明的是，glob允许使用规则，从而获取对应规则匹配的文件。glob工具基于javascript.它使用了minimatch库来进行匹配。其中检索入口文件的源码可以为：

const glob＝require("glob")；

const files＝glob.sync("./src/web/views/**/*.entry.js")；

202、循环查找出html-webpack-plugin所配置出来的所有html页面，以获取全部页面文件。

在一实施例中，通过glob可以得到全项目中所有入口文件的名称以数组形式存在，接下来编译数组来找出所有的html文件。具体可以可以直接借助plugin插件中的html-webpack-plugin插件来实现。在使用html-webpack-plugin这个插件来自动生成html文件时，首先引入了所需的插件和变量，然后利用html-webpack-plugin循环生成html页面。

203、通过webpack的compiler.hooks.compilation.tap()函数获取页面文件的页面信息。

204、获取入口文件的属性信息，根据属性信息将入口文件与对应的页面信息相关联。

在一实施例中，可以通过webpack的钩子函数来获取页面文件的页面信息。

其中，通过使用钩子函数的源代码可以为如下：

205、在入口文件的文件名中添加哈希字符串。

在一实施例中，webpack的钩子函数得到页面信息后和js入口文件相关联起来，在使用webpack对JavaScript文件进行打包时，通还可以在打包的文件名中加一个哈希字符串用来防止缓存。每个html的页面注入存在哈希名称的JavaScript就可以注入进去，生成webpack的自定义plugin。

206、根据关联结果将加入哈希字符串后的入口文件与页面文件进行打包，生成目标页面文件。

webpack在打包时，会将入口文件中的JavaScript文件打包到某个目标文件中，在不考虑代码分割提取的情况下，一个入口文件会打包为一个目标文件，多个入口文件会打包为多个对应的目标文件。因此，在本申请实施例中可以将每个多页页面中的特有的JavaScript文件作为入口文件，在打包时将对应打包成不同的bundle文件，也即目标页面文件。需要说明的是，所谓自动生成html文件，可以理解为将源代码的html复制到目标文件夹中，同时自动引用打包后的JavaScript文件。

这样一来每次在服务端增加一个路由的同时，只要按照规定的文件夹及文件命名方式就可以自动注入入口文件和新的html。利用webpack来构建的MPA(多页面应用)就形成了。BFF层与webpack在同一个架构里，这样可以避免自动化部署的时候更新不同步的问题。

进一步的，在生成目标页面文件后可以对其进行网页渲染，生成图像，在浏览器窗口中进行显示，形成一个完整的网页效果。

由上所述，本发明实施例提出的通过webpack构建多页面应用的方法可以在nodejs的应用程序接口中通过glob方法检索出含有entry.js的目标文件，并将上述目标文件确定为入口文件，循环查找出html-webpack-plugin所配置出来的所有html页面，以获取全部页面文件，通过webpack的compiler.hooks.compilation.tap()函数获取页面文件的页面信息，获取入口文件的属性信息，根据属性信息将入口文件与对应的页面信息相关联，在入口文件的文件名中添加哈希字符串，根据关联结果将加入哈希字符串后的入口文件与页面文件进行打包，生成目标页面文件。本申请实施例所提供的方案可以自动遍历入口文件并与页面文件打包，利用webpack来构建多页面应用，从而在自动化部署时避免前后端更新不同步的问题。

为了实施以上方法，本发明实施例还提供一种通过webpack构建多页面应用的装置，该通过webpack构建多页面应用的装置具体可以集成在终端设备如手机、平板电脑等设备中。

例如，如图5所示，是本发明实施例提供的通过webpack构建多页面应用的装置的第一种结构示意图。该通过webpack构建多页面应用的装置可以包括：

遍历单元301，用于遍历所有页面并检索出所述页面对应的多个入口文件；

获取单元302，用于获取通过预设插件配置出来的全部页面文件；

关联单元303，用于通过所述webpack的预设函数获取所述页面文件的页面信息，并将所述页面信息与所述入口文件进行关联；

打包单元304，用于根据关联结果将所述入口文件与所述页面文件进行打包，生成目标页面文件。

在一实施例中，遍历单元301，具体用于在node js的应用程序接口中通过glob方法检索出含有entry.js的目标文件，并将上述目标文件确定为入口文件。

在一实施例中，获取单元302，具体用于循环查找出html-webpack-plugin所配置出来的所有html页面，以获取所述全部页面文件。

在一实施例中，请参阅图6，图6是本发明实施例提供的通过webpack构建多页面应用的装置的第二种结构示意图，所述关联单元303，可以包括：

获取子单元3031，用于通过所述webpack的compiler.hooks.compilation.tap()函数获取所述页面文件的页面信息；

关联子单元3032，用于获取所述入口文件的属性信息，根据所述属性信息将所述入口文件与对应的页面信息相关联。

继续参阅图6，所述打包单元304，可以包括：

添加子单元3041，用于在所述入口文件的文件名中添加哈希字符串；

打包子单元3042，用于根据关联结果将加入哈希字符串后的入口文件与所述页面文件进行打包，生成目标页面文件。

本发明实施例提出的通过webpack构建多页面应用的装置，可以遍历所有页面并检索出页面对应的多个入口文件，获取通过预设插件配置出来的全部页面文件，通过webpack的预设函数获取页面文件的页面信息，并将页面信息与入口文件进行关联，根据关联结果将入口文件与页面文件进行打包，生成目标页面文件。本申请实施例所提供的方案可以自动遍历入口文件并与页面文件打包，利用webpack来构建多页面应用，从而在自动化部署时避免前后端更新不同步的问题。

本发明实施例还提供一种终端，如提7所示，该终端可以包括射频(RF，RadioFrequency)电路601、包括有一个或一个以上计算机可读存储介质的存储器602、输入单元603、显示单元604、传感器605、音频电路606、无线保真(WiFi，Wireless Fidelity)模块607、包括有一个或者一个以上处理核心的处理器608、以及电源609等部件。本领域技术人员可以理解，提7中示出的终端结构并不构成对终端的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。其中：

RF电路601可用于收发信息或通话过程中，信号的接收和发送，特别地，将基站的下行信息接收后，交由一个或者一个以上处理器608处理；另外，将涉及上行的数据发送给基站。通常，RF电路601包括但不限于天线、至少一个放大器、调谐器、一个或多个振荡器、用户身份模块(SIM，Subscriber Identity Module)卡、收发信机、耦合器、低噪声放大器(LNA，Low Noise Amplifier)、双工器等。此外，RF电路601还可以通过无线通信与网络和其他设备通信。无线通信可以使用任一通信标准或协议，包括但不限于全球移动通讯系统(GSM，Global System of Mobile communication)、通用分组无线服务(GPRS，GeneralPacket Radio Service)、码分多址(CDMA，Code Division Multiple Access)、宽带码分多址(WCDMA，Wideband Code Division Multiple Access)、长期演进(LTE，Long TermEvolution)、电子邮件、短消息服务(SMS，Short Messaging Service)等。

存储器602可用于存储软件程序以及模块，处理器608通过运行存储在存储器602的软件程序以及模块，从而执行各种功能应用以及信息处理。存储器602可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据终端的使用所创建的数据(比如音频数据、电话本等)等。此外，存储器602可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。相应地，存储器602还可以包括存储器控制器，以提供处理器608和输入单元603对存储器602的访问。

输入单元603可用于接收输入的数字或字符信息，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。具体地，在一个具体的实施例中，输入单元603可包括触敏表面以及其他输入设备。触敏表面，也称为触摸显示屏或者触控板，可收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触敏表面上或在触敏表面附近的操作)，并根据预先设定的程式驱动相应的连接装置。可选的，触敏表面可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给处理器608，并能接收处理器608发来的命令并加以执行。此外，可以采用电阻式、电容式、红外线以及表面声波等多种类型实现触敏表面。除了触敏表面，输入单元603还可以包括其他输入设备。具体地，其他输入设备可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆等中的一种或多种。

显示单元604可用于显示由用户输入的信息或提供给用户的信息以及终端的各种图形用户接口，这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。显示单元604可包括显示面板，可选的，可以采用液晶显示器(LCD，Liquid Crystal Display)、有机发光二极管(OLED，Organic Light-Emitting Diode)等形式来配置显示面板。进一步的，触敏表面可覆盖显示面板，当触敏表面检测到在其上或附近的触摸操作后，传送给处理器608以确定触摸事件的类型，随后处理器608根据触摸事件的类型在显示面板上提供相应的视觉输出。虽然在提7中，触敏表面与显示面板是作为两个独立的部件来实现输入和输入功能，但是在某些实施例中，可以将触敏表面与显示面板集成而实现输入和输出功能。

终端还可包括至少一种传感器605，比如光传感器、运动传感器以及其他传感器。具体地，光传感器可包括环境光传感器及接近传感器，其中，环境光传感器可根据环境光线的明暗来调节显示面板的亮度，接近传感器可在终端移动到耳边时，关闭显示面板和/或背光。作为运动传感器的一种，重力加速度传感器可检测各个方向上(一般为三轴)加速度的大小，静止时可检测出重力的大小及方向，可用于识别手机姿态的应用(比如横竖屏切换、相关游戏、磁力计姿态校准)、振动识别相关功能(比如计步器、敲击)等；至于终端还可配置的陀螺仪、气压计、湿度计、温度计、红外线传感器等其他传感器，在此不再赘述。

音频电路606、扬声器，传声器可提供用户与终端之间的音频接口。音频电路606可将接收到的音频数据转换后的电信号，传输到扬声器，由扬声器转换为声音信号输出；另一方面，传声器将收集的声音信号转换为电信号，由音频电路606接收后转换为音频数据，再将音频数据输出处理器608处理后，经RF电路601以发送给比如另一终端，或者将音频数据输出至存储器602以便进一步处理。音频电路606还可能包括耳塞插孔，以提供外设耳机与终端的通信。

WiFi属于短距离无线传输技术，终端通过WiFi模块607可以帮助用户收发电子邮件、浏览网页和访问流式媒体等，它为用户提供了无线的宽带互联网访问。虽然提7示出了WiFi模块607，但是可以理解的是，其并不属于终端的必须构成，完全可以根据需要在不改变发明的本质的范围内而省略。

处理器608是终端的控制中心，利用各种接口和线路连接整个手机的各个部分，通过运行或执行存储在存储器602内的软件程序和/或模块，以及调用存储在存储器602内的数据，执行终端的各种功能和处理数据，从而对手机进行整体监控。可选的，处理器608可包括一个或多个处理核心；优选的，处理器608可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器608中。

终端还包括给各个部件供电的电源609(比如电池)，优选的，电源可以通过电源管理系统与处理器608逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。电源609还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。

尽管未示出，终端还可以包括摄像头、蓝牙模块等，在此不再赘述。具体在本实施例中，终端中的处理器608会按照如下的指令，将一个或一个以上的应用程序的进程对应的可执行文件加载到存储器602中，并由处理器608来运行存储在存储器602中的应用程序，从而实现各种功能：

创建卡顿监控对象，所述卡顿监控对象用于监控主线程绘制用户界面的任务，以及获得预设引用，其中所述预设引用用于与一对象进行关联，以通过所述预设引用调用对象；

遍历所有页面并检索出所述页面对应的多个入口文件；

获取通过预设插件配置出来的全部页面文件；

通过所述webpack的预设函数获取所述页面文件的页面信息，并将所述页面信息与所述入口文件进行关联；

根据关联结果将所述入口文件与所述页面文件进行打包，生成目标页面文件。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见上文针对通过webpack构建多页面应用的方法的详细描述，此处不再赘述。

由上可知，本发明实施例的终端可以遍历所有页面并检索出页面对应的多个入口文件，获取通过预设插件配置出来的全部页面文件，通过webpack的预设函数获取页面文件的页面信息，并将页面信息与入口文件进行关联，根据关联结果将入口文件与页面文件进行打包，生成目标页面文件。本申请实施例所提供的方案可以自动遍历入口文件并与页面文件打包，利用webpack来构建多页面应用，从而在自动化部署时避免前后端更新不同步的问题。

本领域普通技术人员可以理解，上述实施例的各种方法中的全部或部分步骤可以通过指令来完成，或通过指令控制相关的硬件来完成，该指令可以存储于一计算机可读存储介质中，并由处理器进行加载和执行。

为此，本发明实施例提供一种存储介质，其中存储有多条指令，该指令能够被处理器进行加载，以执行本发明实施例所提供的任一种通过webpack构建多页面应用的方法中的步骤。例如，该指令可以执行如下步骤：

遍历所有页面并检索出所述页面对应的多个入口文件；

获取通过预设插件配置出来的全部页面文件；

通过所述webpack的预设函数获取所述页面文件的页面信息，并将所述页面信息与所述入口文件进行关联；

根据关联结果将所述入口文件与所述页面文件进行打包，生成目标页面文件。

以上各个操作的具体实施可参见前面的实施例，在此不再赘述。

其中，该存储介质可以包括：只读存储器(ROM，Read Only Memory)、随机存取记忆体(RAM，Random Access Memory)、磁盘或光盘等。

由于该存储介质中所存储的指令，可以执行本发明实施例所提供的任一种通过webpack构建多页面应用的方法中的步骤，因此，可以实现本发明实施例所提供的任一种通过webpack构建多页面应用的方法所能实现的有益效果，详见前面的实施例，在此不再赘述。

以上对本发明实施例所提供的一种通过webpack构建多页面应用的方法、装置、存储介质以及终端进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (6)

1.一种通过webpack构建多页面应用的方法，其特征在于，包括：

在BFF框架下遍历所有页面并检索出所述页面对应的多个入口文件；

引入插件和变量，通过plugin插件多次实例化，以循环生成所述页面对应的全部html文件，其中实例化过程中构造函数的参数包括filename、template、以及chunks；

通过webpack的compiler.hooks.compilation.tap()函数获取所述html文件的页面信息，获取所述入口文件的属性信息，根据所述属性信息将所述入口文件与对应的页面信息相关联；

在所述入口文件的文件名中添加哈希字符串，生成webpack的自定义plugin，根据关联结果将加入哈希字符串后的入口文件与所述html文件进行打包，生成目标页面文件。

2.如权利要求1所述的通过webpack构建多页面应用的方法，其特征在于，遍历所有页面并检索出所述页面对应的多个入口文件的步骤，包括：

在node js的应用程序接口中通过glob方法检索出含有entry.js的目标文件，并将上述目标文件确定为入口文件。

3.如权利要求1所述的通过webpack构建多页面应用的方法，其特征在于，通过plugin插件多次实例化，以循环生成所述页面对应的全部html文件的步骤，包括：

循环查找出html-webpack-plugin所配置出来的所有html页面，以获取全部页面文件。

4.一种通过webpack构建多页面应用的装置，其特征在于，包括：

遍历单元，用于在BFF框架下遍历所有页面并检索出所述页面对应的多个入口文件；

获取单元，用于引入插件和变量，通过plugin插件多次实例化，以循环生成所述页面对应的全部html文件，其中实例化过程中构造函数的参数包括filename、template、以及chunks；

关联单元，包括获取子单元和关联子单元，所述获取子单元，用于通过webpack的compiler.hooks.compilation.tap()函数获取所述页面文件的页面信息，所述关联子单元，用于获取所述入口文件的属性信息，根据所述属性信息将所述入口文件与对应的页面信息相关联；

打包单元，包括添加子单元和打包子单元，所述添加子单元，用于在所述入口文件的文件名中添加哈希字符串，生成webpack的自定义plugin，所述打包子单元，用于根据关联结果将加入哈希字符串后的入口文件与所述html文件进行打包，生成目标页面文件。

5.如权利要求4所述的通过webpack构建多页面应用的装置，其特征在于，

所述遍历单元，具体用于在node js的应用程序接口中通过glob方法检索出含有entry.js的目标文件，并将上述目标文件确定为入口文件。

6.一种存储介质，其特征在于，所述存储介质存储有多条指令，所述指令适于处理器进行加载，以执行权利要求1至3任一项所述的通过webpack构建多页面应用的方法。

Images