[发明专利]基于webpack的前端网页加载方法、存储介质

权利要求书

1.基于webpack的前端网页加载方法，其特征在于，包括：

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

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

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

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

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

还包括：

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

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

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

修改node工程下的package.json配置文件，在里面增加新配置项cdn，其属性env表示当前工程需要使用CDN加载所述静态文件的所述运行环境。

2.如权利要求1所述的基于webpack的前端网页加载方法，其特征在于，所述配置开启CDN服务器加载的运行环境，具体为：

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

3.如权利要求1所述的基于webpack的前端网页加载方法，其特征在于，所述配置在所述运行环境下，将所述静态文件上传至CDN服务器，具体为：

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

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

4.如权利要求3所述的基于webpack的前端网页加载方法，其特征在于，所述配置在所述运行环境下，通过触发所述执行指令执行所述脚本，具体为：

通过修改node工程下的第二配置文件其中的webpack插件的第三配置文件，配置在所述运行环境下，执行所述生成对应的静态文件并存储在本地的步骤之后，通过触发所述执行指令执行所述脚本；以及

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

5.如权利要求4所述的基于webpack的前端网页加载方法，其特征在于，所述在入口文件遍历获取本地的静态文件的文件名列表，在列表中的各个文件名中添加对应所述CDN服务器的域名和对应代码类型的资源标签，具体为：

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

6.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述程序在被处理器执行时，能实现上述权利要求1-5任一项 所述的基于webpack的前端网页加载方法所包含的步骤。