一种多页面资源文件注入方法及装置与流程

本发明涉及网络应用技术领域，特别是涉及一种多页面资源文件注入方法及装置。

背景技术：

在网站产品开发过程中，多会利用单页面应用技术或多页面应用技术对页面进行配置。单页面应用是指网站中只存在一个html页面，多页面应用是指网站中存在多个html页面，一个页面对应于一个资源文件。

目前，在网站产品开发过程中，多是通过技术人员手动将资源文件写入到页面中。

这种方法存在一定缺点，因为手动写入容易出错，尤其是在多页面应用中，这将使得产品开发效率较低，技术输出和技术成本较高。

技术实现要素：

本发明的目的是提供一种多页面资源注入方法及装置，以提高产品开发效率，减少技术输出和技术成本。

为解决上述技术问题，本发明提供如下技术方案：

一种多页面资源文件注入方法，包括：

在建设目标网站过程中，获得页面参数配置信息，所述页面参数配置信息为在设定环境条件下配置完成的；

根据所述页面参数配置信息，确定环境模式，并生成所述环境模式对应的webpack配置文件；

建立所述webpack配置文件涉及的各个资源文件与页面文件的关联关系；

根据所述关联关系，将各个资源文件分别注入到相关联的页面文件中。

在本发明的一种具体实施方式中，在所述根据所述关联关系，将各个资源文件分别注入到相关联的页面文件中之前，还包括：

生成各个资源文件的消息摘要，并进行混淆压缩合并操作。

在本发明的一种具体实施方式中，所述环境模式为开发模式或者生产模式。

在本发明的一种具体实施方式中，在所述接收页面参数配置信息之后，还包括：

对所述页面参数配置信息中的各参数进行校验；

如果检验通过，则执行所述根据所述页面参数配置信息，确定环境模式，并生成所述环境模式对应的webpack配置文件的步骤。

在本发明的一种具体实施方式中，还包括：

如果检验失败，则输出失败提示信息。

在本发明的一种具体实施方式中，所述页面参数配置信息中包括入口文件参数信息、指定目录参数信息、环境模式参数信息、资源文件注入相关参数信息。

一种多页面资源文件注入装置，包括：

配置信息获得模块，用于在建设目标网站过程中，获得页面参数配置信息，所述页面参数配置信息为在设定环境条件下配置完成的；

配置文件生成模块，用于根据所述页面参数配置信息，确定环境模式，并生成所述环境模式对应的webpack配置文件；

关联关系建立模块，用于建立所述webpack配置文件涉及的各个资源文件与页面文件的关联关系；

文件注入模块，用于根据所述关联关系，将各个资源文件分别注入到相关联的页面文件中。

在本发明的一种具体实施方式中，还包括预处理模块，用于：

在所述根据所述关联关系，将各个资源文件分别注入到相关联的页面文件中之前，生成各个资源文件的消息摘要，并进行混淆压缩合并操作。

在本发明的一种具体实施方式中，还包括参数校验模块，用于：

在所述接收页面参数配置信息之后，对所述页面参数配置信息中的各参数进行校验；如果检验通过，则触发所述配置文件生成模块。

在本发明的一种具体实施方式中，还包括信息提示模块，用于：

在所述参数校验模块检验失败时，输出失败提示信息。

应用本发明实施例所提供的技术方案，在建设目标网站过程中，获得页面参数配置信息，根据页面参数配置信息，确定环境模式，并生成环境模式对应的webpack配置文件，基于该webpack配置文件，建立其涉及的各个资源文件与页面文件的关联关系，根据关联关系，将各个资源文件分别注入到相关联的页面文件中。资源文件基于配置式的方式，自动为页面文件注入对应的资源文件，克服了现有技术中手动将资源文件写入到页面文件中的缺点，提高了产品开发效率，减少了技术输出和技术成本。

附图说明

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

图1为本发明实施例中一种多页面资源注入方法的实施流程图；

图2为本发明实施例中一种多页面资源注入装置的结构示意图。

具体实施方式

为了使本技术领域的人员更好地理解本发明方案，下面结合附图和具体实施方式对本发明作进一步的详细说明。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

参见图1所示，为本发明实施例所提供的一种多页面资源文件注入方法的实施流程图，该方法可以包括以下步骤：

s110：在建设目标网站过程中，获得页面参数配置信息。

页面参数配置信息为在设定环境条件下配置完成的。

在本发明实施例中，在建设目标网站过程中，开发者可以先对页面相关参数进行配置。本发明实施例利用webpack技术进行多页面资源文件注入。开发者在配置页面相关参数之前，需安装相关环境和工具，主要包括node.js，附带npm。

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

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

进而，开发者可以在以上设定环境条件下配置页面参数。在本发明实施例中，页面参数配置信息中可以包括入口文件参数entry信息、指定目录参数directories信息、环境模式参数信息、资源文件注入相关参数信息。其中，环境模式为开发模式或者生产模式。资源文件注入相关参数主要包括页面标题、页面所需注入的入口文件列表、要被注入资源的页面文件以及编译生成的文件等。配置成功后，可以将页面参数配置信息发送给后台。

后台获得页面参数配置信息后，可以继续执行步骤s120的操作。

在本发明的一种具体实施方式中，在步骤s110之后，该方法还可以包括以下步骤：

对页面参数配置信息中的各参数进行校验，如果校验通过，则继续执行步骤s120的操作。

获得页面参数配置信息后，可以先对页面参数配置信息中的各参数进行校验，确定各参数的合法性，如果校验通过，则继续执行步骤s120的操作，否则，可以不做任何操作，或者，在校验失败时，输出失败提示信息，以便开发者自行检查页面参数配置信息中各参数的合法性。

s120：根据页面参数配置信息，确定环境模式，并生成环境模式对应的webpack配置文件。

页面参数配置信息中包含环境模式参数信息。获得页面参数配置信息后，可以从页面参数配置信息中提取环境模式参数信息，进而确定环境模式。并基于该环境模式，生成该环境模式对应的webpack配置文件。不同环境模式下可以执行不同的webpack配置。

举例而言，如果该环境模式为开发模式，则生成的webpack配置文件中需配置代码热加载功能，以适应本地开发需要。

如果该环境模式为生产模式，则生成的webpack配置文件中需配置代码自动压缩合并，以及生成sourcemap文件的功能，同时还可配置图片自动进行base64编码的功能。

s130：建立webpack配置文件涉及的各个资源文件与页面文件的关联关系。

生成环境模式对应的webpack配置文件后，基于webpack配置文件，可以建立webpack配置文件涉及的各个资源文件与页面文件的关联关系。即确定哪个资源文件与哪个页面文件相关联。

s140：根据关联关系，将各个资源文件分别注入到相关联的页面文件中。

根据步骤s130建立的关联关系，可以将各个资源文件分别注入到相关联的页面文件中，实现多页面资源文件自动注入。

在本发明的一个实施例中，在步骤s140之前，该方法还可以包括以下步骤：

生成各个资源文件的消息摘要，并进行混淆压缩合并操作。

生成各个资源文件的消息摘要，如使用md5消息摘要算法生成各个资源文件的消息摘要，进而进行混淆压缩合并操作，再将进行混淆压缩合并操作的各个资源文件分别注入到相关联的页面文件中。

本发明实施例对webpack技术进行了扩展和延伸，使其不仅适用于单页面应用，也能够适用于多页面应用，扩宽了其使用场景。

应用本发明实施例所提供的方法，在建设目标网站过程中，获得页面参数配置信息，根据页面参数配置信息，确定环境模式，并生成环境模式对应的webpack配置文件，基于该webpack配置文件，建立其涉及的各个资源文件与页面文件的关联关系，根据关联关系，将各个资源文件分别注入到相关联的页面文件中。资源文件基于配置式的方式，自动为页面文件注入对应的资源文件，克服了现有技术中手动将资源文件写入到页面文件中的缺点，提高了产品开发效率，减少了技术输出和技术成本。

相应于上面的方法实施例，本发明实施例还提供了一种一种多页面资源文件注入装置，下文描述的一种多页面资源文件注入装置与上文描述的一种多页面资源文件注入方法可相互对应参照。

参见图2所示，该装置包括以下模块：

配置信息获得模块210，用于在建设目标网站过程中，获得页面参数配置信息，页面参数配置信息为在设定环境条件下配置完成的；

配置文件生成模块220，用于根据页面参数配置信息，确定环境模式，并生成环境模式对应的webpack配置文件；

关联关系建立模块230，用于建立webpack配置文件涉及的各个资源文件与页面文件的关联关系；

文件注入模块240，用于根据关联关系，将各个资源文件分别注入到相关联的页面文件中。

应用本发明实施例所提供的装置，在建设目标网站过程中，获得页面参数配置信息，根据页面参数配置信息，确定环境模式，并生成环境模式对应的webpack配置文件，基于该webpack配置文件，建立其涉及的各个资源文件与页面文件的关联关系，根据关联关系，将各个资源文件分别注入到相关联的页面文件中。资源文件基于配置式的方式，自动为页面文件注入对应的资源文件，克服了现有技术中手动将资源文件写入到页面文件中的缺点，提高了产品开发效率，减少了技术输出和技术成本。

在本发明的一种具体实施方式中，还包括预处理模块，用于：

在根据关联关系，将各个资源文件分别注入到相关联的页面文件中之前，生成各个资源文件的消息摘要，并进行混淆压缩合并操作。

在本发明的一种具体实施方式中，还包括参数校验模块，用于：

在接收页面参数配置信息之后，对页面参数配置信息中的各参数进行校验；如果检验通过，则触发配置文件生成模块220。

在本发明的一种具体实施方式中，还包括信息提示模块，用于：

在参数校验模块检验失败时，输出失败提示信息。

在本发明的一种具体实施方式中，环境模式为开发模式或者生产模式。

在本发明的一种具体实施方式中，页面参数配置信息中包括入口文件参数信息、指定目录参数信息、环境模式参数信息、资源文件注入相关参数信息。

本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。

专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(ram)、内存、只读存储器(rom)、电可编程rom、电可擦除可编程rom、寄存器、硬盘、可移动磁盘、cd-rom、或技术领域内所公知的任意其它形式的存储介质中。

本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的技术方案及其核心思想。应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以对本发明进行若干改进和修饰，这些改进和修饰也落入本发明权利要求的保护范围内。