CN109144482B - 一种基于webpack的快速开发环境搭建方法及装置 - Google Patents

Abstract

本申请公开了一种基于webpack的快速开发环境搭建方法及装置，其中，所述方法包括：安装并配置webpack工具及相关参数；获取当前静态资源文件，所述静态资源文件至少包括：js文件、css文件和图片；编译并打包所述静态资源文件为js模块；建立本地服务器；基于所述本地服务器，动态加载所述js模块。本申请能够在webpack的基础上，对大量静态资源文件进行合理组合和压缩，从而提高平台开发和搭建的效率，并且在建立本地服务器的基础上，利用webpack动态加载js模块，从而实现前端与后端的解耦，起到独立工作的效果。

Description

一种基于webpack的快速开发环境搭建方法及装置

技术领域

本申请涉及web平台开发领域，尤其涉及一种基于webpack的快速开发环境搭建方法及装置。

背景技术

企业web开发逐渐转向面向多人、多业务模块的模式，通常，在web开发时，需要首先在本地搭建nginx(engine x，HTTP和反向代理服务器)环境，nginx环境稳定性强、功能集丰富、资源消耗低，因此对于新建站点，能够同时支持多条链路并发，非常适合现今web使用模式。前端通过所搭建的nginx环境，生成web展示及操作页面，而前端仍然需要通过proxyserver(代理服务器)将用户的指示操作转接到服务端(后端)的接口，从而获取后端数据对前端进行支撑。

简单来说，现行的web开发模式为前端和后端耦合模式，例如PM(ProductManager，产品经理)下达一个功能指令，后端接收指令后需要告知前端根据所需功能制作模板，再由前端将做好的模板传送至后端，后端就该模板进行对接，并指出模板的问题，由前端进行模板的二次修改。待前端根据后端的协调和指示完成模板修改后，后端对PM进行功能交付。可以看出，在开发的过程中，前端与后端的搭建过程不断交织；而且在后续web平台的维护过程中，需要不断地对前端与后端解耦、修正、再耦合，过程非常繁琐；而且，对于现今web平台的面向人数更多，一旦用户发起一次请求，且请求量较大时，前端需要发送等量的请求，进而消耗大量的计算资源，可想而知，当大量用户叠加在一起发起大量请求时，前端与后端将同时承受多大的计算压力，一旦服务器出现状况，前端与后端将基于耦合关系，同时崩溃，造成用户体验感下降，客户群流失。

发明内容

本申请提供了一种基于webpack的快速开发环境搭建方法及装置，以解决现有前后端搭建相互依赖的问题。

第一方面，本申请提供了一种基于webpack的快速开发环境搭建方法，所述方法包括：

安装并配置webpack工具及相关参数；

获取当前静态资源文件，所述静态资源文件至少包括：js文件、css文件和图片；

编译并打包所述静态资源文件为js模块；

建立本地服务器；

基于所述本地服务器，动态加载所述js模块。

结合第一方面，在第一方面的第一种可实现方式中，所述获取当前静态资源文件，包括：

获取全部静态资源文件的字符串；

识别各所述静态资源文件的字符串中的类别字符串；

根据所述类别字符串，分类各所述静态资源文件。

结合第一方面，在第一方面的第二种可实现方式中，所述编译并打包静态资源文件为js模块，包括：

解析并激活webpack加载项和基本插件；

初始化webpack的操作环境；

建立静态资源文件的编译入口；

构建选项模块及对应的编译对象；

确定待打包的当前静态资源文件；

解析所述待打包的当前静态资源文件，并创建js子模块；

打包全部所述js子模块为js模块。

结合第一方面，在第一方面的第三种可实现方式中，所述建立本地服务器，包括：

安装nodejs平台，并配置相关参数；

测试所述nodejs平台是否满足安装要求；

如果所述nodejs平台满足安装要求，则基于nodejs平台安装本地服务器，并配置相关参数。

结合第一方面，在第一方面的第四种可实现方式中，所述基于本地服务器，动态加载js模块，包括：

获取当前静态资源文件与上一静态资源文件；

对比所述当前静态资源文件与所述上一静态资源文件，确定区别文件；

编译并打包所述区别文件为子js模块；

根据所述子js模块，更新所述上一静态资源文件所对应的js模块。

结合第一方面，在第一方面的第五种可实现方式中，所述基于本地服务器，动态加载js模块，还包括：

获取当前时刻和上一更新时刻；

计算所述当前时刻与所述上一更新时刻的差值；

如果所述差值大于或等于预设更新时间间隔，则更新所述js模块。

第二方面，本申请提供了一种基于webpack的快速开发环境搭建装置，所述装置包括：

安装配置单元，用于安装并配置webpack工具及相关参数；

文件获取单元，用于获取当前静态资源文件，所述静态资源文件至少包括：js文件、css文件和图片；

编译打包单元，用于编译并打包所述静态资源文件为js模块；

服务器建立单元，用于建立本地服务器；

动态加载单元，用于基于所述本地服务器，动态加载所述js模块。

结合第二方面，在第二方面的第一种可实现方式中，所述文件获取单元，包括：

字符串获取单元，用于获取全部静态资源文件的字符串；

识别单元，用于识别各所述静态资源文件的字符串中的类别字符串；

分类单元，用于根据所述类别字符串，分类各所述静态资源文件。

结合第二方面，在第二方面的第二种可实现方式中，所述编译打包单元，包括：

解析激活单元，用于解析并激活webpack加载项和基本插件；

初始化单元，用于初始化webpack的操作环境；

入口建立单元，用于建立静态资源文件的编译入口；

对象构建单元，用于构建选项模块及对应的编译对象；

目标确定单元，用于确定待打包的当前静态资源文件；

子模块创建单元，用于解析所述待打包的当前静态资源文件，并创建js子模块；

子模块打包单元，用于打包全部所述js子模块为js模块。

结合第二方面，在第二方面的第三种可实现方式中，所述服务器建立单元，包括：

平台安装单元，用于安装nodejs平台，并配置相关参数；

平台测试单元，用于测试所述nodejs平台是否满足安装要求；

服务器安装单元，用于如果所述nodejs平台满足安装要求，则基于nodejs平台安装本地服务器，并配置相关参数。

结合第二方面，在第二方面的第四种可实现方式中，所述动态加载单元，包括：

资源文件获取单元，用于获取当前静态资源文件与上一静态资源文件；

文件对比单元，用于对比所述当前静态资源文件与所述上一静态资源文件，确定区别文件；

区别文件编译打包单元，用于编译并打包所述区别文件为子js模块；

模块更新单元，用于根据所述子js模块，更新所述上一静态资源文件所对应的js模块。

结合第二方面，在第二方面的第五种可实现方式中，所述动态加载单元还包括：

时间获取单元，用于获取当前时刻和上一更新时刻；

差值计算单元，用于计算所述当前时刻与所述上一更新时刻的差值；

判断单元，用于如果所述差值大于或等于预设更新时间间隔，则更新所述js模块。

由以上技术可知，本申请提供了一种基于webpack的快速开发环境搭建方法及装置，其中，所述方法包括：安装并配置webpack工具及相关参数；获取当前静态资源文件，所述静态资源文件包括：js文件、css文件和图片；编译并打包所述静态资源文件为js模块；建立本地服务器；基于所述本地服务器，动态加载所述js模块。使用时，在前端安装webpack工具，并且设置相应的参数，令webpack能够支持当前系统环境及需要运行软件的类别和版本。前端获取当前时刻的全部静态资源文件，例如：js文件、css文件、图片、模板、说明文件等，并将静态资源文件作为前端web页面制作渲染的资源。将全部静态资源文件通过编译转换为计算机可识别的二进制语言，并将编译后的全部静态资源文件打包压缩成js模块，进而有效减少静态资源文件的占用空间和体积，从而有效提高静态资源传输、处理和维护的效率。建立本地服务器，比能在本地服务器上，不断地获取当前的静态资源文件，从而对js模块进行动态加载和更新，表现为前端不断地刷新web页面，从而令前端web页面始终保持正常工作，而不受后端数据处理等工作进程的影响，从而有效实现前端与后端的解耦，达到前端不依赖后端，能够独立工作的效果。

附图说明

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

图1为本申请实施例提供的一种基于webpack的快速开发环境搭建方法的流程图；

图2为本申请实施例提供的一种获取静态资源文件的方法的流程图；

图3为本申请实施例提供的一种编译打包静态资源文件的方法的流程图；

图4为本申请实施例提供的一种建立本地服务器的方法的流程图；

图5为本申请实施例提供的一种动态加载js模块的方法的流程图；

图6为本申请实施例提供的一种动态加载js模块的优化方法的流程图；

图7为本申请实施例提供的一种基于webpack的快速开发环境搭建装置的结构示意图。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合本申请具体实施例及相应的附图，对本申请实施例中的技术方案进行清楚、完整地描述。显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。以下结合附图，详细说明本申请各实施例所提供的技术方案。

请参阅图1，为本申请实施例提供的一种基于webpack的快速开发环境搭建方法的流程图，所述方法包括：

步骤100、安装并配置webpack工具及相关参数。

Webpack可以看做是一种模块打包机，用来分析项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言，例如：Scss，TypeScript等，并将这些模块打包形成合适的格式以供浏览器使用。Webpack视HTML、JS、CSS、图片等文件都是一种资源，每个资源文件都是一个模块文件，webpack就是根据每个模块文件之间的依赖关系将所有的模块打包起来的。现今很多web网页相当于是功能丰富的应用，它们拥有这复杂的JavaScript代码和大量的依赖包，由于代码和依赖包会占用大量空间，并且占用大量的计算资源，因此会令前端开发效率大大降低。为了简化开发的复杂度，前端需要“缩减”代码与依赖包，即将复杂的程序细化为小的文件，打包为模块，从而大大缩减代码与依赖包的空间占用，并且能够有效释放计算资源，减轻计算负担，提高计算效率，令前端web页面的呈现更加流畅，增强用户的使用感。Webpack不仅对多种语法CommonJS、AMD、ES6等做了兼容；为了适应团队开发，可以将各种资源文件打包成模块；还能够将代码切割，实现按需加载，降低初始化时间；webpack具有强大的插件接口，能够通过内部的大量插件提高使用的灵活度。

Webpack能够实现将复杂业务文件合理组织，优化各静态资源，从而降低静态资源的传输效率。

步骤200、获取当前静态资源文件，所述静态资源文件至少包括：js文件、css文件和图片。

静态资源文件包括：js(javascrip，脚本)文件、css(Cascading Style Sheet，层叠样式表)文件、图片、说明文件、模板文件等。前端接收到客户端发送的静态资源文件。如果前端依次将接收到的静态资源文件进行后续处理，则会令web页面不断处于维护更新状态，用户需要不断刷新以获得最新的页面呈现，这显然会令前端处于不停更新计算状态，严重占用计算资源，且增加用户的使用负担，令用户体验感下降。在本申请实施例中，首先将全部静态资源文件存储于存储单元内，然后对静态资源文件做再分配处理，而非将全部静态资源文件同时进行后续处理或者采用接收与处理并行的方式进行后续处理。

本实施例提供第一种静态资源文件进行后续处理的顺序，为设定处理时间间隔，如果当前时刻满足预设的处理时间间隔，则对当前的全部静态资源文件进行后续处理，利用时间将静态资源文件进行分类，从而缓解计算资源负担；本实施例提供第二种静态资源文件进行后续处理的顺序，为设定文件堆积数量，如果当前的静态资源文件的文件堆积数量满足预设的文件堆积数量，则对当前的全部静态资源文件进行后续处理，利用文件堆积数量将静态资源文件进行分类，从而缓解计算资源负担；本实施例提供第三种静态资源文件进行后续处理的顺序，为设定文件占用空间，如果当前的静态资源文件的文件总占用空间满足预设的文件占用空间，则对当前的全部静态资源文件进行后续处理，利用文件占用空间将静态资源文件进行分类，从而缓解计算资源负担。其中，在上述三种所给出的静态资源文件进行后续处理顺序的方法中，进行后续处理的当前静态资源文件，可以以静态资源文件的被接收顺序为优先级，优先处理最先被接收的静态资源文件；可以以静态资源文件的内容为优先级，优先处理包含较为重要信息的静态资源文件；还可以以静态资源文件的占容为优先级，优先处理占容较小的静态资源文件，或者是将多个占容较小的静态资源文件与一个占容较大的静态资源文件并行处理，以提高后续处理效率。

步骤300、编译并打包所述静态资源文件为js模块。

前端以webpack为基础，对全部静态资源文件进行编译及打包。具体地，参照步骤200中示出的三种优先级顺序：以静态资源文件的被接收顺序为优先级、以静态资源文件的内容为优先级、或者以静态资源文件的占容为优先级，对静态资源文件进行编译打包处理，进而有效提高静态资源文件的处理效率。

步骤400、建立本地服务器。

前端建立本地服务器，所述本地服务器能够独立服务于前端操作，令前端能够依赖本地服务器执行命令，从而脱离后端的控制。可见，建立本地服务器是实现前端与后端分离的重要手段。

步骤500、基于所述本地服务器，动态加载所述js模块。

前端操作依赖于本地服务器，从而在接收到客户端的功能指令后，可以在前端独立开发web网页，令web网页正常显示，而与后端的数据调用产生分离。Js模块中包含的静态资源文件是支持web网页正常显示的关键资源，需要不断更新js模块的内容，例如：购物网站面向用户的前端web网页显示各种商品及相关信息，用户通过点击购买等操作选项完成自己的购物体验。用户不停刷新购物页面，以获得最新的购物信息，点击购买后显示的交易金额等界面都是前端不断更新加载js模块呈现的web页面效果，可见，交易过程由后端进行数据处理，无论交易结果如何，都不会影响前端web页面的呈现效果，即web页面不会崩溃，仅会出现维持原页面或者显示指定的等待页面等，而其他的购物页面仍然能够根据接收的静态资源文件的改变而不断刷新，不受后端交易数据处理的影响，进而完美呈现前端与后端分离后的效果，提高用户的体验感。

可见，本申请实施例提供的一种基于webpack的快速开发环境搭建方法，能够在webpack的基础上，对大量静态资源文件进行合理组合和压缩，从而提高平台开发和搭建的效率，并且在建立本地服务器的基础上，利用webpack动态加载js模块，从而实现前端与后端的独立工作，实现真正的前后端解耦，有效提高了平台搭建工作的稳定性和有效性。

请参阅图2，为本申请实施例提供的一种获取静态资源文件的方法的流程图。在本申请实施例中，所述获取当前静态资源文件，包括：

步骤201、获取全部静态资源文件的字符串；

步骤202、识别各所述静态资源文件的字符串中的类别字符串；

步骤203、根据所述类别字符串，分类各所述静态资源文件。

具体地，每个静态资源文件均有其所对应的字符串，前端获取全部静态资源文件的字符串，能够同时获得静态资源文件字符串中所包含的文件信息，例如：文件内容、文件类别、文件占容、文件属性等。前端通过对各字符串进行分析，将一个静态资源文件的字符串能够对应其所携带的信息划分为若干子字符串，并且从中准确地识别出类别字符串。根据预设的类别划分规则，将各静态资源文件进行分类。

前端所获取的静态资源文件数量巨大、类型复杂，如果将其毫无章法地储存在一起，容易对后续工作造成运行负担，从而降低开发效率。在具体开发过程中，既可以按照上述分类方式，即静态资源文件的本身类别，进行分类，也可以根据前端识别所得的静态资源文件中的其他字符串，例如：文件占容字符串、文件内容字符串等对静态资源文件进行分类，例如：为了提高后续开发效率，实现并行，将几个占容小的静态资源文件与一个占容较大的静态资源文件分为一类，令最终形成的总文件占容维持在预设范围内；或者将具有相关文件内容的静态资源文件分为一类，从而提高静态资源文件之间的相关性，有效提高后续开发效率。

请参阅图3，为本申请实施例提供的一种编译打包静态资源文件的方法的流程图。在本申请实施例中，所述编译并打包静态资源文件为js模块，包括：

步骤301、解析并激活webpack加载项和基本插件；

步骤302、初始化webpack的操作环境；

步骤303、建立静态资源文件的编译入口；

步骤304、构建选项模块及对应的编译对象；

步骤305、确定待打包的当前静态资源文件；

步骤306、解析所述待打包的当前静态资源文件，并创建js子模块；

步骤307、打包全部所述js子模块为js模块。

利用源码tapable作为事件发布、订阅执行的插件架构，实现插件绑定与调用。通过各自插件中的apply(应用)方法调用tapable的plugin(插件)方法，将插件添加到compiler(编译)对象，再通过相应的插件apply继续调用plugin方法，实现编译过程。

具体地，在编译之前，需要对option(选项)初始化，即解析shell(壳)脚本与config(配置)脚本中的配置项，用于激活webpack的加载项和插件。在初始化后的webpack基础上，构建编译对象，其中，webpack options apply首先会初始化几个基础插件，然后将options中对应的选项进行require操作。继续初始化compiler的上下文，loader和file的输入与输出环境。

完成初始化之后，开始对静态资源文件进行编译，首先需要建立静态资源文件的编译入口。具体地，将compiler对象划分为两个对象，存放输入输出的相关配置信息和编译器Parser对象，并实时监听文件变化。

编译入口建立之后，需要对入口文件进行分析并创建模块对象。具体的，启动编译命令，构建选项中的模块。构建compilation编译对象，所述编译对象负责组织整个编译过程，包含了每个构建环节所对应的方法；所述编译对象的内部同时保留了对compile对象的引用，并且存放所有modules(模块)，chunks(数据块)、生成的assets(图像资源)以后最后用来生成js的template(模板)。触发make事件，并调用addEntry，找到编译入口的js文件，进行下一步的模块绑定操作。解析入口js文件，通过对应的工厂方法创建模块，保存到compilation对象；对modules进行创建，具体过程包括：调用loader处理源文件，使用acorn生成AST，并且遍历AST，当遇到require等依赖时，创建依赖Dependency加入依赖数组。在module创建完毕后，开始处理依赖的module，异步对依赖的module进行创建，如果依赖中仍有依赖，则依照上述过程循环处理依赖。

调用seal方法封装，逐次对每个module和chunk进行整理，生成编译后的源码，通过合并、拆分令每一个chunk对应一个入口文件js，从而生成最后的js模块。

在完成全部js子模块的创建过程后，对全部js子模块进行打包处理，进而完成静态资源文件的编译打包过程，并通过emit Assets将最终的js模块输出到output的path中。

请参阅图4，为本申请实施例提供的一种建立本地服务器的方法的流程图。在本申请实施例中，所述建立本地服务器，包括：

步骤401、安装nodejs平台，并配置相关参数；

步骤402、测试所述nodejs平台是否满足安装要求；

步骤403、如果所述nodejs平台满足安装要求，则基于nodejs平台安装本地服务器，并配置相关参数。

具体地，首先安装nodejs平台并配置合适的运行参数，以适应当前系统环境，并使用node-v命令检查安装版本，同时安装nrm。在nodejs平台上，利用nrm帮助切换不同的NPM源的快捷开关，例如：npm、cnpm等。在nodejs平台的基础上，完成本地服务器server的安装，并利用npm-run-dev等命令启动本地服务器。

请参阅图5，为本申请实施例提供的一种动态加载js模块的方法的流程图。在本申请实施例中，所述基于本地服务器，动态加载js模块，包括：

步骤501、获取当前静态资源文件与上一静态资源文件；

步骤502、对比所述当前静态资源文件与所述上一静态资源文件，确定区别文件；

步骤503、编译并打包所述区别文件为子js模块；

步骤504、根据所述子js模块，更新所述上一静态资源文件所对应的js模块。

前端获取当前时刻的全部静态资源文件，与上一时刻的全部静态资源文件，其中，在本实施例中，时刻为静态资源文件的更新时刻，上一静态资源文件为上一时刻更新后的静态资源文件，且当前时刻应为编译打包后的js模块。通过对比当前静态资源文件与上一静态资源文件，能够找到在上一更新时刻到当前时刻内静态资源文件的变化文件，即能够确定区别文件。将区别文件按照步骤300，编译打包为子js模块。此时，以上一静态资源文件编译打包成的js模块为基础，将子js模块增添至其中，起到为js模块更新的作用，进而形成最新的js模块。如果完全摒弃上一静态资源文件，重新以当前静态资源文件为基础，对全部静态资源文件进行编译和打包，将耗费巨大的时间，占用大量的计算资源，进而降低整体更新效率。本申请实施例优选的，以上一静态资源文件为基础，以当前静态资源文件与上一静态资源文件之间的区别文件为目标，仅对区别文件做编译和打包，再将子js模块与上一js模块合并，这样能够大大减少每次的计算量，有效地提高计算速度，从而大大提升更新效率。

请参阅图6，为本申请实施例提供的一种动态加载js模块的优化方法的流程图。在本申请实施例中，所述基于本地服务器，动态加载js模块，还包括：

步骤5001、获取当前时刻和上一更新时刻；

步骤5002、计算所述当前时刻与所述上一更新时刻的差值；

步骤5003、如果所述差值大于或等于预设更新时间间隔，则更新所述js模块。

前端将获取所得的当前时刻与静态资源文件上一更新时刻做差值计算，并将所得差值与预设的更新时间间隔做比较，如果差值大于或等于更新时间间隔，则执行更新js模块的操作，即需要重新获取当前静态资源文件，并根据当前静态资源文件更新上一静态资源文件；如果差值小于更新时间间隔，则正常继续当前工作。

其中，更新时间间隔可以根据人工经验设定，也可以根据开发同等条件的平台所记录的历史更新数据，将其更新时间间隔作为本开发的更新时间间隔。

通过动态加载js模块，能够令前端web网页始终保持正常呈现状态，而不会发生崩溃的现象，从而能够有效保持用户的直观感受。

请参阅图7，为本申请实施例提供的一种基于webpack的快速开发环境搭建装置的结构示意图。在本申请实施例中，所述装置包括：

安装配置单元1，用于安装并配置webpack工具及相关参数；

文件获取单元2，用于获取当前静态资源文件，所述静态资源文件至少包括：js文件、css文件和图片；

编译打包单元3，用于编译并打包所述静态资源文件为js模块；

服务器建立单元4，用于建立本地服务器；

动态加载单元5，用于基于所述本地服务器，动态加载所述js模块。

本申请提供的一种基于webpack的快速开发环境搭建装置的另一实施例中，所述文件获取单元2，包括：字符串获取单元，用于获取全部静态资源文件的字符串；识别单元，用于识别各所述静态资源文件的字符串中的类别字符串；分类单元，用于根据所述类别字符串，分类各所述静态资源文件。

本申请提供的一种基于webpack的快速开发环境搭建装置的另一实施例中，所述编译打包单元3，包括：解析激活单元，用于解析并激活webpack加载项和基本插件；初始化单元，用于初始化webpack的操作环境；入口建立单元，用于建立静态资源文件的编译入口；对象构建单元，用于构建选项模块及对应的编译对象；目标确定单元，用于确定待打包的当前静态资源文件；子模块创建单元，用于解析所述待打包的当前静态资源文件，并创建js子模块；子模块打包单元，用于打包全部所述js子模块为js模块。

本申请提供的一种基于webpack的快速开发环境搭建装置的另一实施例中，所述服务器建立单元4，包括：平台安装单元，用于安装nodejs平台，并配置相关参数；平台测试单元，用于测试所述nodejs平台是否满足安装要求；服务器安装单元，用于如果所述nodejs平台满足安装要求，则基于nodejs平台安装本地服务器，并配置相关参数。

本申请提供的一种基于webpack的快速开发环境搭建装置的另一实施例中，所述动态加载单元5，包括：资源文件获取单元，用于获取当前静态资源文件与上一静态资源文件；文件对比单元，用于对比所述当前静态资源文件与所述上一静态资源文件，确定区别文件；区别文件编译打包单元，用于编译并打包所述区别文件为子js模块；模块更新单元，用于根据所述子js模块，更新所述上一静态资源文件所对应的js模块。

本申请提供的一种基于webpack的快速开发环境搭建装置的另一实施例中，所述动态加载单元5还包括：时间获取单元，用于获取当前时刻和上一更新时刻；差值计算单元，用于计算所述当前时刻与所述上一更新时刻的差值；判断单元，用于如果所述差值大于或等于预设更新时间间隔，则更新所述js模块。

值得注意的是，具体实现中，本申请还提供一种计算机存储介质，其中，该计算机存储介质可存储有程序，该程序执行时可包括本发明提供的用户身份的服务提供方法或用户注册方法的各实施例中的部分或全部步骤。所述的存储介质可为磁碟、光盘、只读存储记忆体(英文：read-only memory，简称：ROM)或随机存储记忆体(英文：random accessmemory，简称：RAM)等。

本领域的技术人员可以清楚地了解到本发明实施例中的技术可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本发明实施例中的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例或者实施例的某些部分所述的方法。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本发明的其它实施方案。本申请旨在涵盖本发明的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本发明的一般性原理并包括本发明未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本发明的真正范围和精神由下面的权利要求指出。

本说明书中各实施例之间相同相似的部分互相参见即可。尤其，对于基于webpack的快速开发环境搭建装置实施例而言，由于其基本相似与方法实施例，所以描述的比较简单，相关之处参见方法实施例中的说明即可。

以上所述的本申请实施例方式并不构成对本申请保护范围的限定。

Claims (12)

1.一种基于webpack的快速开发环境搭建方法，其特征在于，包括：

安装并配置webpack工具及相关参数；

获取当前静态资源文件，所述静态资源文件至少包括：js文件、css文件和图片；

对所述静态资源文件进行分类，包括：

根据时间分类，设定处理时间间隔，如果当前时刻满足预设的处理时间间隔，则对当前的全部静态资源文件进行后续处理；

或者，根据堆积数量分类，设定文件堆积数量，如果当前的静态资源文件的文件堆积数量满足预设的文件堆积数量，则对当前的全部静态资源文件进行后续处理；

或者，根据文件占用空间分类设定文件占用空间，如果当前的静态资源文件的文件总占用空间满足预设的文件占用空间，则对当前的全部静态资源文件进行后续处理；

设置所述静态资源文件的处理顺序，包括：

以静态资源文件的被接收顺序为优先级，优先处理最先被接收的静态资源文件；

或者，以静态资源文件的内容为优先级，优先处理包含较为重要信息的静态资源文件；

或者，以静态资源文件的占容为优先级，优先处理占容较小的静态资源文件；

或者，将多个占容较小的静态资源文件与一个占容较大的静态资源文件并行处理；

编译并打包所述静态资源文件为js模块；

建立本地服务器；

基于所述本地服务器，动态加载所述js模块。

2.根据权利要求1所述的搭建方法，其特征在于，所述获取当前静态资源文件，包括：

获取全部静态资源文件的字符串；

识别各所述静态资源文件的字符串中的类别字符串；

根据所述类别字符串，分类各所述静态资源文件。

3.根据权利要求1所述的搭建方法，其特征在于，所述编译并打包静态资源文件为js模块，包括：

解析并激活webpack加载项和基本插件；

初始化webpack的操作环境；

建立静态资源文件的编译入口；

构建选项模块及对应的编译对象；

确定待打包的当前静态资源文件；

解析所述待打包的当前静态资源文件，并创建js子模块；

打包全部所述js子模块为js模块。

4.根据权利要求1所述的搭建方法，其特征在于，所述建立本地服务器，包括：

安装nodejs平台，并配置相关参数；

测试所述nodejs平台是否满足安装要求；

如果所述nodejs平台满足安装要求，则基于nodejs平台安装本地服务器，并配置相关参数。

5.根据权利要求1所述的搭建方法，其特征在于，所述基于本地服务器，动态加载js模块，包括：

获取当前静态资源文件与上一静态资源文件；

对比所述当前静态资源文件与所述上一静态资源文件，确定区别文件；

编译并打包所述区别文件为子js模块；

根据所述子js模块，更新所述上一静态资源文件所对应的js模块。

6.根据权利要求5所述的搭建方法，其特征在于，所述基于本地服务器，动态加载js模块，还包括：

获取当前时刻和上一更新时刻；

计算所述当前时刻与所述上一更新时刻的差值；

如果所述差值大于或等于预设更新时间间隔，则更新所述js模块。

7.一种基于webpack的快速开发环境搭建装置，其特征在于，包括：

安装配置单元，用于安装并配置webpack工具及相关参数；

文件获取单元，用于获取当前静态资源文件，所述静态资源文件至少包括：js文件、css文件和图片，对所述静态资源文件进行分类，设置所述静态资源文件的处理顺序；

对所述静态资源文件进行分类，包括：

根据时间分类，设定处理时间间隔，如果当前时刻满足预设的处理时间间隔，则对当前的全部静态资源文件进行后续处理；

或者，根据堆积数量分类，设定文件堆积数量，如果当前的静态资源文件的文件堆积数量满足预设的文件堆积数量，则对当前的全部静态资源文件进行后续处理；

或者，根据文件占用空间分类设定文件占用空间，如果当前的静态资源文件的文件总占用空间满足预设的文件占用空间，则对当前的全部静态资源文件进行后续处理；

设置所述静态资源文件的处理顺序，包括：

以静态资源文件的被接收顺序为优先级，优先处理最先被接收的静态资源文件；

或者，以静态资源文件的内容为优先级，优先处理包含较为重要信息的静态资源文件；

或者，以静态资源文件的占容为优先级，优先处理占容较小的静态资源文件；

或者，将多个占容较小的静态资源文件与一个占容较大的静态资源文件并行处理；

编译打包单元，用于编译并打包所述静态资源文件为js模块；

服务器建立单元，用于建立本地服务器；

动态加载单元，用于基于所述本地服务器，动态加载所述js模块。

8.根据权利要求7所述的搭建装置，其特征在于，所述文件获取单元，包括：

字符串获取单元，用于获取全部静态资源文件的字符串；

识别单元，用于识别各所述静态资源文件的字符串中的类别字符串；

分类单元，用于根据所述类别字符串，分类各所述静态资源文件。

9.根据权利要求7所述的搭建装置，其特征在于，所述编译打包单元，包括：

解析激活单元，用于解析并激活webpack加载项和基本插件；

初始化单元，用于初始化webpack的操作环境；

入口建立单元，用于建立静态资源文件的编译入口；

对象构建单元，用于构建选项模块及对应的编译对象；

目标确定单元，用于确定待打包的当前静态资源文件；

子模块创建单元，用于解析所述待打包的当前静态资源文件，并创建js子模块；

子模块打包单元，用于打包全部所述js子模块为js模块。

10.根据权利要求7所述的搭建装置，其特征在于，所述服务器建立单元，包括：

平台安装单元，用于安装nodejs平台，并配置相关参数；

平台测试单元，用于测试所述nodejs平台是否满足安装要求；

服务器安装单元，用于如果所述nodejs平台满足安装要求，则基于nodejs平台安装本地服务器，并配置相关参数。

11.根据权利要求7所述的搭建装置，其特征在于，所述动态加载单元，包括：

资源文件获取单元，用于获取当前静态资源文件与上一静态资源文件；

文件对比单元，用于对比所述当前静态资源文件与所述上一静态资源文件，确定区别文件；

区别文件编译打包单元，用于编译并打包所述区别文件为子js模块；

模块更新单元，用于根据所述子js模块，更新所述上一静态资源文件所对应的js模块。

12.根据权利要求11所述的搭建装置，其特征在于，所述动态加载单元还包括：

时间获取单元，用于获取当前时刻和上一更新时刻；

差值计算单元，用于计算所述当前时刻与所述上一更新时刻的差值；

判断单元，用于如果所述差值大于或等于预设更新时间间隔，则更新所述js模块。

Images