基于webpack定制前端自动化开发环境的方法与流程

本发明涉及一种开发环境的处理方法，尤其是涉及一种基于webpack定制前端自动化开发环境的方法。

背景技术：

如今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的javascript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多实践方法：

a：模块化，让开发者可以把复杂的程序细化为小的文件；

b：类似于typescript这种在javascript基础上拓展的开发语言：使开发者能够实现目前版本的javascript不能直接使用的特性，并且之后还能装换为javascript文件使浏览器；

c：可以识别:scss，less等css预处理器。

这些改进确实大大的提高了开发者的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别，而手动处理又是非常繁琐，因此开发者就可以利用webpack搭建一个前端自动化的开发环境。

下面是相关的一些介绍：

1.webpack

webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如js(含jsx)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理，它能有grunt(grunt是基于node.js的项目构建工具。grunt和grunt插件是通过npm安装并管理的，npm是node.js的包管理器)或gulp(gulp是一个自动化构建工具，主要用来设定程序自动处理静态资源的工作。简单的说，gulp就是用来打包项目的)所有基本功能。

2.node.js

node.js是一个运行在服务端的框架，它的底层就使用了v8引擎。开发者知道apache+php以及java的servlet都可以用来开发动态网页，node.js的作用与他们类似，只不过是使用javascript来开发，它大大提升了开发的性能以及便利。

3.npm工具

npm是javascript世界的包管理工具，并且是node.js平台的默认包管理工具。通过npm可以安装、共享、分发代码，管理项目依赖关系。

技术实现要素：

本发明提供了一种基于webpack定制前端自动化开发环境的方法，针对目前大多数的项目采用的开发模式都是模块法开发，解决如何利用webpack实现模块化开发的方式，从而实现对应的前端自动化环境。其技术方案如下所述：

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

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

s2：下载bable与css对应的依赖包，并对bable与css进行配置；

s3：解析css预处理器；

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

s5：使用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返回的节点插入页面。

步骤s1中，配置webpack的参数包括以下步骤：

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

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

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

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

步骤s1中，采用基于node.js构建的本地开发服务器时，在webpack中进行配置之前需要单独安装node.js作为项目依赖。

进一步的，步骤s2中，所述配置bable是把babel的配置选项放在一个单独的名为".babelrc"的配置文件中，并在项目名称webpack-cli文件夹下新建.babelrc文件；所述配置css是在安装css-loader和style-loader后，把css依赖包安装到项目webpack-cli中，然后编辑webpack.config.js文件配置module选项，添加处理样式表配置。

进一步的，步骤s3中，所述css预处理器能够将sass、less文件转化为浏览器可识别的css文件。

进一步的，步骤s4中，通过插件拓展webpack，实现在修改组件代码后，自动刷新实时预览修改后的效果，配置如下：(1)在webpack配置文件中添加hmr插件；(2)在webpack项目的webpackdevserver中添加hot参数。

进一步的，步骤s5中，所述配置产品是将webpack项目文件分解配置为若干个小的文件，包括以下步骤：

s51：在webpack-cli文件夹下创建一个名为webpack.prod.config.js的文件，在里面加上配置代码；

s52：编辑webpack-cli文件夹下的package.json文件scripts选项，添加build选项；

s53：在终端中执行npmrunbuild命令。

步骤s5中，所述插件包括occurrenceorderplugin、uglifyjsplugin、extracttextplugin。

步骤s5中，通过使用缓存加快加载速度，使得缓存文件名和缓存文件内容相匹配。

本发明利用webpack工具实现了前端模块化开发环境，实现css自动补齐、es6代码转化、保存刷新、自启动服务器功能，以及后期缓存等优化处理。

附图说明

图1是所述基于webpack定制前端自动化开发环境的方法的流程示意图；

图2是将webpack项目文件分解配置为若干个小的文件的示意图。

具体实施方式

以下是本发明某实施例的操作步骤说明：

1.基础准备阶段

1.1新建一个文件夹，命名为webpack-cli,webpack-cli就是项目名，项目名使用小写字母，并且不带空格，不能含有大写字母。

1.2安装webpack，webpack可以使用npm安装。

使用终端在该文件夹中执行下述指令就可以完成安装，由于网络原因安装过程可能需要一些时间。

//全局安装

npminstall-gwebpack

//安装到你的项目目录

npminstall--save-devwebpack

注：用淘宝镜像的cnpm依赖包能下载的快一些

webpack可以全局安装，也可以安装到你的项目目录。刚开始学习webpack为了方便，建议同时全局安装和安装到你的项目目录。

1.3在webpack-cli文件夹中创建一个package.json文件，这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等。在终端中使用npminit命令可以自动创建这个package.json文件。

npminit

输入这个命令后，终端会问你一系列诸如项目名称，项目版本，项目描述，入口文件，作者等信息，不过，如果不准备在npm中发布模块，这些问题的答案都不重要，傻瓜式操作一路回车默认即可。这些信息今后都可以更改package.json来修改。

1.4在webpack-cli文件夹中创建两个文件夹src文件夹和dist文件夹，src文件夹用来存放原始数据，例如：sass文件、less文件、javascript模块等，dist文件夹用来存放经过webpack处理过的src文件夹数据，这也是准备给浏览器读取的数据，其中包括使用webpack打包后的js文件等。在这里还需要在dist文件夹中创建index.html文件，在src文件夹中创建name.js和main.js文件。

1.5在dist文件夹中的index.html文件只有最基础的html代码，它唯一的目的就是加载打包后的js文件bundle.js。

1.6在src文件夹中的name.js只包括一个用来返回name信息的html元素的函数。

1.7在src文件夹中的main.js用来把name模块(其实可以简单的把它看作name.js)返回的节点插入页面。

//main.js

varname＝require('./name.js')；

document.queryselector('#root').appendchild(name())；

2.配置webpack配置文件

在webpack-cli文件夹根目录下新建一个名为webpack.config.js的文件，并在其中进行最简单的配置。如下所示，它包含入口文件路径和存放打包后文件的地方路径。

注：__dirname是node.js中的一个全局变量，它指向当前js文件所在的目录。

现在只需要在终端里运行webpack命令就可以了，这条命令会自动参考webpack.config.js文件中的配置选项打包项目，输出结果。

此时项目的dist文件夹下也会出现打包好的bundle.js文件。利用npm更快捷的执行打包任务。

通过webpack配置文件和执行webpack命令其实是比较烦人且容易出错的，不过通过npm可以引导任务执行，对其进行配置后可以使用简单的npmstart命令来代替这些繁琐的命令。在package.json中对npm的脚本部分进行相关设置，相当于把npm的start命令指向webpack命令，设置方法如下:

执行npmstart后命令行的输出显示。

3.利用webpack生成sourcemaps

sourcemaps就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置，有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。这无疑给开发者带来了很大方便.为了方便调试可以利用webpack生成sourcemaps。

执行npmstart命令后就能生成对应的sourcemaps，终端输出信息。

4.使用webpack构建本地服务器

为了实现不用刷新的效果，webpack提供一个可选的本地开发服务器，这个本地服务器基于node.js构建，可以实现想要的这些功能，不过它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖。在终端中输入下面的指令安装对应组件，建议同时全局安装和安装到你的项目目录。

//全局安装

npminstall-gwebpack-dev-server

//安装到你的项目目录

npminstall--save-devwebpack-dev-server

编辑webpack-cli文件夹下的webpack.config.js文件配置以上选项.

在终端中执行npmrundev命令,浏览器自动打开http://localhost:9000/就可以看到像之前一样的页面。

5babel的配置

babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，不过webpack把它们整合在一起使用，但是对于每一个需要的功能或拓展，

npminstall--save-devbabel-corebabel-loaderbabel-preset-es2015

把babel的配置选项放在一个单独的名为".babelrc"的配置文件中，

在webpack-cli文件夹下新建.babelrc文件，添加如下代码:

//.babelrc

{

presets:['es2015']

}

6.css配置

安装css-loader,style-loader，输入如下命令，把这些依赖包安装到你的项目中。

npminstall--save-devstyle-loadercss-loader，

编辑webpack.config.js文件配置module选项，添加处理样式表配置。

以上两步后，对应的配置文件内容

7.css预处理器

css预处理器可以将sass、less文件转化为浏览器可识别的css文件，以下是常用的css预处理器loaders。

安装postcss-loader和autoprefixer(自动添加前缀的插件)，安装到项目中。

npminstall--save-devpostcss-loaderautoprefixer

编辑webpack.config.js文件配置module选项，添加postcss-loader处理样式表配置。

在webpack-cli文件夹下新建postcss.config.js文件，添加如下代码：

8.hotmodulereplacement插件(plugins)

插件(plugins)是用来拓展webpack功能的，它会在整个构建过程中生效，执行相关的任务。

hotmodulereplacement(hmr)

它允许你在修改组件代码后，自动刷新实时预览修改后的效果。在webpack中使用hmr也很简单，只需要做两项配置。

1.在webpack配置文件中添加hmr插件；

2.在webpackdevserver中添加hot参数。

代码效果：

在package.json中增加—hot

"dev":"webpack-dev-server--devtooleval--progress--content-basebuild--hot"9.产品阶段的构建

这样，已经使用webpack构建了一个完整的开发环境，但是在产品阶段，可能还需要对打包的文件进行额外的处理，比如说优化、压缩、缓存以及分离css和js。

对于复杂的项目来说，需要复杂的配置，这时候分解配置文件为多个小的文件可以使得事情井井有条，以webpack-cli项目来说，可以在webpack-cli文件夹下创建一个名为webpack.prod.config.js的文件，在里面加上基本的配置代码,如下：

编辑webpack-cli文件夹下的package.json文件scripts选项，添加build选项，编辑后的文件如下：

在终端中执行npmrunbuild命令，输出信息如图2所示。

说明分解配置文件为多个小的文件成功了。

10.优化插件

webpack提供了一些在发布阶段非常有用的优化插件，它们大多来自于webpack社区，可以通过npm安装，通过以下插件可以完成产品发布阶段所需的功能。

occurrenceorderplugin：为组件分配id，通过这个插件webpack可以分析和优先考虑使用最多的模块，并为它们分配最小的id。

uglifyjsplugin：压缩js代码。

extracttextplugin：分离css和js文件。

下面来看看如何使用它们，occurrenceorderplugin和uglifyjsplugins都是内置插件，因此只需要安装extracttextplugin插件。

安装extracttextplugin插件：

npminstall--save-devextract-text-webpack-plugin

编辑webpack.config.js文件配置plugins选项,添加这三个插件，因为要分离css所以还要配置module下的loaders选项。编辑后的文件如下：

在终端中执行npmstart命令，此时项目结构已经发生改变,build文件夹下多出了抽离出来的style.css文件还有对应的style.css.map文件，如果打开build文件夹下的bundle.js文件，就可以看到bundle.js文件内容已经被压缩处理了。说明这三个插件已经配置成功了。

11.缓存

为了加快加载速度，合理的利用缓存是必不可少的，使用缓存的最好方法是保证文件名和文件内容是匹配的，内容改变，名称也相应改变。

webpack可以把一个哈希值添加到打包文件的文件名中，添加特殊的字符串混合体([name],[id]and[hash])到输出文件名前，便于修改bug以后，对应更新用户本地的缓存文件。

编辑webpack.config.js文件修改output/plugins选项.编辑后的文件如下：

在终端中执行npmstart命令，输出信息。

此时项目build文件夹下的main.css和main.js文件都对应的加上了哈希值。

如果打开build文件夹下的index.html文件，就可以看到引用的css、js文件名也对应发生了改变，这样修改bug以后，也能对应更新用户本地的缓存文件。

六、项目说明

配置文件

利用webpack工具实现前端模块化开发环境。实现css自动补齐,es6代码转化，保存刷新，自启动服务器功能，以及后期缓存等优化处理。