基于webpack的前端网页加载方法、存储介质与流程

本发明涉及前端工程化领域，具体涉及基于webpack的前端网页加载方法、存储介质。

背景技术：

在前端工程化的大背景下，前端代码变得越来越庞大。如果将前端代码发布到一个普通的web服务器，其加载性能是非常低下的，所以更好的做法是将前端代码发布到cdn服务器，然后进行静态加载。

但是传统的web发布方式无法直接应用于目前流行的基于node+webpack的前端开发架构中，这是因为传统的web不是前后端分离的，使用的是模板语言例如smarty。web端的开发需要服务端环境，而node+webpack实现了前后端分离，完全不需要服务端环境。由于两种开发方式截然不同，所以旧的开发流程以及相关技术方案无法直接套用到新的开发流程中。

本发明针对目前流行的前端工程化开发方式，提供了一种基于webpack的前端网页加载方案，能够优化静态资源的加载方式，同时解决以下问题：

1、发布过程能够自动完成，无需人工干预；

2、兼容node+webpack的开发方式；

3、支持不同环境随意切换本地加载或者cdn加载，例如开发环境下需要本地加载，正式环境则使用cdn加载。

技术实现要素：

本发明所要解决的技术问题是：提供一种基于webpack的前端网页加载方法、存储介质，能兼容node+webpack的开发方式和支持加载方式的切换。

为了解决上述技术问题，本发明采用的技术方案为：

基于webpack的前端网页加载方法，包括：

配置开启cdn服务器加载的运行环境；

打包前端代码，生成对应的静态文件并存储在本地；

配置在所述运行环境下，将所述静态文件上传至cdn服务器，以及

在入口文件遍历获取本地的静态文件的文件名列表，在列表中的各个文件名中添加对应所述cdn服务器的域名和对应代码类型的资源标签；

在所述运行环境下，浏览器通过访问所述入口文件，依据所述资源标签对应的文件名记载的域名从所述cdn服务器加载所述静态文件。

本发明提供的另一个技术方案为：

一种计算机可读存储介质，其上存储有计算机程序，所述程序在被处理器执行时，能实现上述基于webpack的前端网页加载方法所包含的步骤。

本发明的有益效果在于：可以灵活配置需要开启cdn服务器的运行环境，支持不同环境随意切换本地加载或者cdn加载；配置在上述运行环境下将自动上传静态文件至cdn，自动完成发布流程，而无需人工干预；在入口文件将静态文件的各个文件名添加指向cdn的域名和资源标签，在上述运行环境下时，能基于标签自动记载对应域名的静态文件，实现cdn静态加载方式能兼容node+webpack的开发方式。本发明能利用cdn服务器分担本地服务器的工作，从而显著提升前端网页加载的性能，优化用户体验。

附图说明

图1为本发明基于webpack的前端网页加载方法的流程示意图；

图2为本发明实施例二的自动编译和发布的流程的交互图；

图3为本发明实施例三的前端页面自动加载流程的交互图。

具体实施方式

为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图予以说明。

本发明最关键的构思在于：在指定运行环境下，利用cdn服务器分担本地服务器的工作，显著提升前端网页加载的性能。

本发明涉及的技术术语解释:

请参照图1，本发明提供基于webpack的前端网页加载方法，包括：

配置开启cdn服务器加载的运行环境；

打包前端代码，生成对应的静态文件并存储在本地；

配置在所述运行环境下，将所述静态文件上传至cdn服务器，以及

在入口文件遍历获取本地的静态文件的文件名列表，在列表中的各个文件名中添加对应所述cdn服务器的域名和对应代码类型的资源标签；

在所述运行环境下，浏览器通过访问所述入口文件，依据所述资源标签对应的文件名记载的域名从所述cdn服务器加载所述静态文件。

从上述描述可知，本发明的有益效果在于：

1、发布过程能够自动完成，无需人工干预

2、兼容node+webpack的开发方式

3、支持不同环境随意切换本地加载或者cdn加载，例如开发环境下需要本地加载，正式环境则使用cdn加载。

进一步的，还包括：

配置在非所述运行环境下，在入口文件遍历获取本地的静态文件的文件名列表，在列表中的各个文件名中添加对应代码类型的资源标签；

在非所述运行环境下，浏览器通过访问所述入口文件，依据所述资源标签对应的文件名从本地服务器加载所述静态文件。

由上述描述可知，在非指定的运行环境下，将使用默认的本地静态加载方式，从而支持不同环境随意切换，更好的满足不同需求。

进一步的，所述配置开启cdn服务器加载的运行环境，具体为：

通过修改node工程下的第一配置文件，配置使用cdn服务器加载静态文件的运行环境。

由上述描述可知，在一具体实施方式中，可以通过修改node工程下的配置文件，实现cdn静态加载运行环境的指定，具有操作方便，易于实现的特点。

进一步的，所述配置在所述运行环境下，将所述静态文件上传至cdn服务器，具体为：

获取一脚本及其执行指令，所述脚本对应将本地存储有所述静态文件的文件夹上传至cdn服务器；

配置在所述运行环境下，通过触发所述执行指令执行所述脚本。

由上述描述可知，能在指定cdn加载的运行环境下，通过配置自动触发执行指令完成本地静态文件自动上传至cdn服务器，为后续从cdn服务器加载静态文件提供支持。

进一步的，所述配置在所述运行环境下，通过触发所述执行指令执行所述脚本，具体为：

通过修改node工程下的第二配置文件其中的webpack插件的第三配置文件，

配置在所述运行环境下，执行所述生成对应的静态文件并存储在本地的步骤之后，通过触发所述执行指令执行所述脚本；以及

配置在非所述运行环境下，执行所述生成对应的静态文件并存储在本地的步骤之后，从本地加载所述静态文件。

由上述描述可知，在一具体实施方式中，可以通过修改node工程的配置文件下的webpack插件的配置文件，实现在打包过程对应预设的不同的静态加载方式，判断是直接本地加载静态文件还是上传静态文件至cdn为cdn静态加载做准备。

进一步的，所述在入口文件遍历获取本地的静态文件的文件名列表，在列表中的各个文件名中添加对应所述cdn服务器的域名和对应代码类型的资源标签，具体为：

依据所述第三配置文件的修改，通过修改node工程下的入口文件，配置在所述运行环境下，将webpack插件的公共路径指向所述cdn服务器的域名，然后遍历本地的静态文件，获取对应静态js代码的第一文件名列表和对应静态css代码的第二文件名列表，并在所述第一文件名列表和第二文件名列表的各个文件名中添加对应所述cdn服务器的域名，最后在第一文件名列表的各个文件名中添加script标签，在第二文件名列表的各个文件名中添加link标签。

由上述描述可知，在一具体实施方式中，可以通过修改node工程下的入口文件，在静态文件的各个文件名中添加对应的资源标签以及指向cdn的域名，从而实现在依据资源标签调用时能依据域名从cdn服务器获取所需的资源，进而实现cdn加载静态文件在node+webpack的开发方式中的兼容。

本发明提供的另一个技术方案为：

一种计算机可读存储介质，其上存储有计算机程序，所述程序在被处理器执行时，能实现上述基于webpack的前端网页加载方法所包含的步骤。

从上述描述可知，本发明的有益效果在于：对应本领域普通技术人员可以理解实现上述技术方案中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来实现的，所述的程序可存储于一计算机可读取的存储介质中，该程序在执行时，可包括如上述各方法的流程。

其中，所述的存储介质可以是磁盘、光碟、只读存储记忆体(read-onlymemory，rom)或随机存储记忆体(randomaccessmemory，ram)等。

实施例一

请参阅图1，本实施例提供基于webpack的前端网页加载方法，包括：

s1：配置开启cdn服务器加载的运行环境；

具体的，可以通过修改node工程下的第一配置文件，配置使用cdn服务器加载静态文件的运行环境。

通过该步骤，能实现通过配置，指定需要启动cdn加载静态文件的运行环境，除此之外的其他运行环境下将禁用cdn加载，而使用默认的本地加载。

s2：打包前端代码，生成对应的静态文件并存储在本地；

具体将通过webpack对前端代码进行打包，生成静态文件。打包生成的静态文件默认存储在本地。默认的，本地的静态文件的文件名列表中的各个文件名中的域名指向的是本地，由本地服务器加载该静态文件。

s3：配置在所述运行环境下，将所述静态文件上传至cdn服务器；

即配置在上述s1指定的运行环境下时，将自动从给本地上传静态文件至cdn服务器。

在一具体实施方式中，该步骤包括：

s31：获取一脚本及其执行指令，所述脚本对应将本地存储有所述静态文件的文件夹上传至cdn服务器；

s32：配置在所述运行环境下，通过触发所述执行指令执行所述脚本。

通过编写自动将本地存储静态文件的文件夹上传至cdn服务器的脚本，在该脚本完成后，设置执行该脚本的执行命令，便可在指定的时机自动执该脚本对应的步骤，从而实现静态文件自动上传至cdn。

具体而言，上述的s32步骤的具体实现过程包括：

通过修改node工程下的第二配置文件其中的webpack插件的第三配置文件，

配置在所述运行环境下，执行所述生成对应的静态文件并存储在本地的步骤之后，通过触发所述执行指令执行所述脚本；以及

配置在非所述运行环境下，执行所述生成对应的静态文件并存储在本地的步骤之后，从本地加载所述静态文件。

通过上述配置，能在打包环境下对应步骤s1配置的运行环境下要开始cdn加载，即webpack将不会生成加载静态文件代码。这个时候，我们就可以自定义加载方式，首先通过在此时触发执行指令，执行上述脚本，实现将本地的静态文件自动上传至cdn服务器，为后续能从cdn加载提供支持。而在对应非上述的运行环境下时不需要开始cdn加载，即webpack会自动生成加载静态文件的代码，从本地加载静态文件，这也是现有默认的加载方式，无需改动。

s4：配置在所述运行环境下，在入口文件遍历获取本地的静态文件的文件名列表，在列表中的各个文件名中添加对应所述cdn服务器的域名和对应代码类型的资源标签。

具体而言，可以依据上述步骤s32中的第三配置文件的修改，通过修改node工程下的入口文件，配置在所述运行环境下，首先，将webpack插件的公共路径指向所述cdn服务器的域名；然后，遍历本地的静态文件，获取对应静态js代码的第一文件名列表和对应静态css代码的第二文件名列表，并在所述第一文件名列表和第二文件名列表的各个文件名中添加对应所述cdn服务器的域名；最后，在第一文件名列表的各个文件名中添加script标签，在第二文件名列表的各个文件名中添加link标签。

该步骤的目的是，通过修改静态文件中各个文件名的名称，将其对应本地的域名修改成指向cdn服务器的域名，使其在依据标签加载资源时能从cdn器中获取，而非原本默认的本地。所述资源标签也叫加载标签，用于执行资源加载的操作，入口文件下存储有多个不同类型的资源标签，在用户通过浏览器访问时，将依据浏览器发起的请求，从入口文件下依据对应的资源标签进行资源加载，以获取请求对应的页面。

s5：配置在非所述运行环境下，在入口文件遍历获取本地的静态文件的文件名列表，在列表中的各个文件名中添加对应代码类型的资源标签；

s6：在非所述运行环境下，浏览器通过访问所述入口文件，依据所述资源标签对应的文件名从本地服务器加载所述静态文件。

上述s5和s6的步骤对应的是当处于非步骤s1指定的运行环境下时，便依据现有的静态文件加载方式进行资源获取。

实施例二

请参照图2和图3，本实施例对应实施例一，提供自动编译和发布的流程，如图2所示，包括：

一、build发布命令：向webpack发送执行指令；

二、webpack打包命令：

1、对前端代码进行打包，生成静态文件；

2、若打包环境下不需要开始cdn加载，则设置inject＝true；

3、若打包环境下要开始cdn加载，则设置inject＝false；同时指向inex.html入口模板文件；

三、inex.html入口模板文件：循环本地的静态文件的各个文件名，加上cdn域名，并生成加载标签；

四、build发布命令：向autoupioad自动上传命令发起执行指令autoupioad的请求；

五、autoupioad自动上传命令：对应上述二、3步骤：打包环境要开始cdn加载，则将打包后的静态文件上传至cdn服务器。

如图3所示，同时提供前端网页自动加载流程：

一、用户通过浏览器向index.html发起一网页的加载请求；

二、index.html接收到请求后，依据请求对应的资源标签，判断资源标签的域名在本地还是在cdn服务器；若在本地，则向本地服务器加载当前域名下的静态文件；若在cdn，则从cdn服务器加载静态文件；然后将加载得到的静态文件返回给浏览器；

三、浏览器依据接收到的静态文件进行渲染，获取页面。

实施例三

本实施例对应实施例一或实施例二，提供一具体运用场景：

第一步：修改node工程下的package.json配置文件(位于项目工程的根目录)，在里面增加新配置项“cdn”，其属性“env”表示当前工程需要在哪些环境使用cdn加载静态文件。例如：

{

cdn:{

“env”:“test,production”

}

}

上述配置例子表示在test(测试环境)和production(生产环境)下，需要开启cdn动态加载。

第二步：修改node工程下的webpack.config.js文件(webpack工具程序的配置文件，一般位于项目根目录下)，对webpack插件htmlwebpackplugin(webpack工具程序的一个插件程序)下的inject属性进行以下修改，规则如下：

如果当前运行环境属于第一步中package.json配置cdn.env下列举的环境，那么将inject设置为false，否则设置为true；

其中，inject属性用于通知webpack插件，是否自动生成加载静态文件的代码，当inject＝true，那么webpack会自动生成加载静态文件的代码，从本地加载静态文件；当值为inject＝false的时候，webpack将不会生成加载静态文件代码，这个时候，我们就可以通过自定义，将原本由webpack生成加载静态文件代码的任务给具体开发者自己生成，如使其从cdn加载静态代码。

第三步：修改node工程下的入口模板文件(通常是index.html或者index.ejs)，根据htmlwebpackplugin.options.inject(就是第二步的配置)的值，在body标签(所有的html文件，都必须包含有body标签)的尾部进行以下修改：

如果为true：则返回什么也不做；

如果为false：设置_webpack_public_path__为cdn域名，然后遍历htmlwebpackplugin.files.js(静态js代码的文件名列表)和htmlwebpackplugin.files.css(静态css代码的文件名列表)得到webpack编译之后的静态文件名，并且在文件名前面添加cdn服务器的域名。

例如：从htmlwebpackplugin.files.js得到一个js文件名：a_v1_1_12.js；那么拼接cdn服务器域名后，转换为：http://www.cdn.com/a_v1_1_12.js。

通过该步骤，将本地加载修改为cdn加载。

第四步：根据上一步得到的js和css的文件地址，分别使用script标签和link标签进行加载。

在该步骤加上script和link标签后，浏览器就会执行加载指令，加载指定位置的文件。

例如js地址为http://www.cdn.com/a_v1_1_12.js，则在入口文件中写成：<scripttype＝”text/javascript”src＝”http://www.cdn.com/a_v1_1_12.js”></script>。

第三步和第四步的具体实现的伪代码如下：

第五步：

编写自动将存储在本地文件夹的静态文件上传到cdn服务器的脚本。假设该脚本完成后，执行命令为：“nodecdnupload”。

第六步：

修改node工程的package.json配置文件，在script属性下(这个属性下列举出了当前工程可以自行的命令)，增加一个命令，取名autoupload，这个值就是上一步自动上传脚本的指令“nodecdnupload”。

例如：

{

scripts:{

autoupload:“nodecdnupload”

}

}

在之前编译命令后，追加cdnupload命令，例如之前编译命令取名“build”，值是“webpack”那么追加之后就是：

{

scripts:{

build:“webpack&autoupload”

autoupload:“nodecdnupload”

}

}

其中，build是打包命令，有两个部分组成，一个是webpack编译程序，一个是autoupload将前一步编译好的程序发布到cdn。

这一步的目的，就是在编译完成后，自动执行上传指令，将本地的静态文件发布到cdn服务器，使得整个流程的尽量自动化，减少人工干预。

实施例四

一种计算机可读存储介质，其上存储有计算机程序，所述程序在被处理器执行时，能实现上述实施例一至实施例三任意一个实施例所述的基于webpack的前端网页加载方法所包含的步骤。具体的步骤内容在此不再复述，详细请查阅实施例一至实施例三的记载。

综上所述，本发明提供的基于webpack的前端网页加载方法、存储介质，不仅能自动完成发布过程，无需人工干预，提供发布效率的同时减少失误；而且，还能兼容node+webpack的开发方式；进一步的，还能支持不同运行环境随意切换加载方式。本发明能够实现在预设的运行环境下，利用cdn服务器分担本地服务器的工作，从而显著提升前端网页加载的性能，优化用户体验。

以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。