[发明专利]基于webpack定制前端自动化开发环境的方法

权利要求书

1.一种基于webpack定制前端自动化开发环境的方法，包括下列步骤：

S1：下载并安装webpack，配置webpack的参数，生成信息文件Source Maps；

S2：下载Bable与CSS对应的依赖包，并对Bable与CSS进行配置；

S3：解析CSS预处理器；

S4：增加热加载功能，实现自动刷新项目；

S5：使用Webpack构建了一个完整的开发环境后，进行配置产品，以及通过优化插件进行优化。

2.根据权利要求1所述的基于webpack定制前端自动化开发环境的方法，其特征在于：步骤S1中，安装webpack包括以下步骤：

S11：新建一个命名为webpack-cli的文件夹，同时webpack-cli作为项目名称；

S12：使用npm安装webpack；

S13：使用npminit命令在webpack-cli文件夹中创建一个package.json文件，作为npm说明文件；

S14：在webpack-cli文件夹中创建两个文件夹src文件夹和dist文件夹，src文件夹用来存放原始数据，dist文件夹用来存放经过Webpack处理过的src文件夹数据，也是准备给浏览器读取的数据；

S15：在dist文件夹中创建index.html文件，用于加载打包后的js文件bundle.js；

S16：在src文件夹中创建name.js和main.js文件，所述name.js只包括一个用来返回name信息的html元素的函数；所述main.js用来把name.js返回的节点插入页面。

3.根据权利要求2所述的基于webpack定制前端自动化开发环境的方法，其特征在于：步骤S1中，配置webpack的参数包括以下步骤：

(1)在webpack-cli文件夹的根目录下新建一个名为webpack.config.js的文件，并进行配置，该文件包含入口文件路径和存放打包后文件的地方路径；

(2)此时项目的dist文件夹下会出现打包好的bundle.js文件；

(3)利用npm执行打包任务；

(4)能够在package.json中对npm的脚本部分进行相关设置，相当于把npm的start命令指向webpack命令。

4.根据权利要求1所述的基于webpack定制前端自动化开发环境的方法，其特征在于：步骤S1中，采用基于node.js构建的本地开发服务器时，在Webpack中进行配置之前需要单独安装node.js作为项目依赖。

5.根据权利要求1所述的基于webpack定制前端自动化开发环境的方法，其特征在于：步骤S2中，所述配置Bable是把Babel的配置选项放在一个单独的名为.babelrc的配置文件中，并在项目名称webpack-cli文件夹下新建.babelrc文件；所述配置CSS是在安装css-loader和style-loader后，把CSS依赖包安装到项目webpack-cli中，然后编辑webpack.config.js文件配置module选项，添加处理样式表配置。

6.根据权利要求1所述的基于webpack定制前端自动化开发环境的方法，其特征在于：步骤S3中，所述CSS预处理器能够将SASS、LESS文件转化为浏览器可识别的CSS文件。

7.根据权利要求1所述的基于webpack定制前端自动化开发环境的方法，其特征在于：步骤S4中，通过插件拓展Webpack，实现在修改组件代码后，自动刷新实时预览修改后的效果，配置如下：(1)在Webpack配置文件中添加HMR插件；(2)在Webpack项目的Webpack DevServer中添加hot参数。