基于webpack的前端工程化开发解决方案探索（三）：webpack-dev-server

　　

　　前两篇中咱们使用webpack完成了静态资源（css/js/img）等自动写入HTML模板中，同时还能够为静态资源添加hash版本号，既知足了咱们对于静态资源的打包要求，同时又无需开发人员介入打包过程，让咱们的重点集中在业务逻辑的实现上来。可是每次修改完代码后若是手动执行 webpack 命令才能生效的话，那也够虐心的，好在的webpack为咱们提供了一个强力的开发工具：webpack-dev-server！

　　

　　1、代码压缩

　　在开始了解webpack-dev-server以前，咱们还有一件准备工做须要作，那就是完成对代码的压缩混淆，不只能够保证代码的安全性，还能够下降资源文件的大小，减小网络传输。

　　A. 压缩HTML

 1 new HtmlWebpackPlugin({                        //根据模板插入css/js等生成最终HTML
 2             favicon:'./src/img/favicon.ico', //favicon路径
 3             filename:'/view/index.html',    //生成的html存放路径，相对于 path
 4             template:'./src/view/index.html',    //html模板路径
 5             inject:true,    //容许插件修改哪些内容，包括head与body
 6             hash:true,    //为静态资源生成hash值
 7             minify:{    //压缩HTML文件
 8                 removeComments:true,    //移除HTML中的注释
 9                 collapseWhitespace:true    //删除空白符与换行符
10             }
11         })

　　HtmlWebpackPlugin插件在生成HTML调用了 html-minifier 插件来完成对HTML的压缩，这里咱们使用两个配置完成来移除HTML中的注释以及空白符达到压缩的效果，其余的具体的配置参数你们请参考 html-minifier API

　　

　　B. 压缩JS与CSS

1 new webpack.optimize.UglifyJsPlugin({    //压缩代码
2             compress: {
3                 warnings: false
4             },
5             except: ['$super', '$', 'exports', 'require']    //排除关键字
6         }),

　　webpack已经内嵌了uglifyJS来完成对JS与CSS的压缩混淆，无需引用额外的插件。

　　这里须要注意的是压缩的时候须要排除一些关键字，不能混淆，好比$或者require，若是混淆的话就会影响到代码的正常运行。

　　修改完 webpack配置后，咱们就能够运行webpack命令来从新打包了。

　　此次能够看到dist下输出的Js/css/html都是压缩过的。

　　参考代码：https://github.com/xiaoyunchen/webpack/blob/master/webpack.config.js

　　OK，到目前为止，咱们的静态资源文件已经能够自动生成，压缩，合并（webpack主要打包功能）已经基本上配置完成。

 

　　

　　2、webpack-dev-server

　　webpack开发服务器，是webpack官方提供的一个辅助开发工具，它能够自动监控项目下的文件，一旦有修改保存操做，开发服务器就会自动运行webpack 打包命令，帮咱们自动将开发的代码从新打包。并且，若是须要的话，还能自动刷新浏览器，从新加载资源。

　　Cool！通常前端开发人员都会有两台显示器，一台用于编辑代码，一台用于打开浏览器查看效果。若是配置上webpack-dev-server的话，咱们只须要在保存修改后的代码，什么也不用作，webpack就能自动帮咱们打包代码，同时自动刷新浏览器，让咱们立马看到修改后的效果。

　　一样的，咱们首先经过npm安装webpack-dev-server:

npm install webpack-dev-server --save-dev

　　安装完成后咱们就能够在项目根目录经过 webpack-dev-server 命令来启动开发服务器了，固然这其中也有不少配置，具体的API请参考：webpack-dev-server Options

　　在webpack配置文件中增长开发服务器的配置：

devServer:{
        contentBase:'./dist/view'
    }

　　这里主要是将其运行目录设置为打包后的view目录。

　　而后咱们经过命令来启动开发服务器：

webpack-dev-server --inline

　　webpack-dev-server有两种启动模式：

　　iFrame：该模式下修改代码后会自动打包，可是浏览器不会自动刷新

　　inline：内联模式，该模式下修改代码后，webpack将自动打包而且刷新浏览器，让咱们看到最终的修改效果

　　你们能够分别启动这两种模式来验证下不一样的效果，通常咱们都选择inline模式。

　　服务器启动成功之后，咱们只须要在浏览器中访问 http://localhost:8080 便可访问。

　　

　　很好！这样咱们就很轻松的实现了一边修改代码一边查看效果的目的。

　　等等，还没完。webpack还为咱们提供了一种更NX的技术，叫作HMR！

　　

　　

　　3、Hot Modules Replacemant

　　HMR，模块热部署。

　　也就是说咱们的修改后的代码不只能够自动打包，并且浏览器不用彻底刷新，只须要异步刷新，加载修改后部分代码便可，加载完成效果会立刻反应在页面效果上。

　　是的，很屌的样子。可是启动这个模式并非难事，咱们只须要在启动webpack-dev-server是添加--hot参数便可。

webpack-dev-server --inline --hot

　　咱们启动HMR后，来看下具体的效果：

　　首先咱们访问 http://localhost:8080 

　　

　　这是咱们以前作的效果，点击按钮后，浏览器经过异步请求加载了chunk1这个模块JS以及咱们所须要的图片资源。请注意这里的时间戳和边框颜色。

　　而后咱们到代码CSS中去修改边框颜色，将其修改成蓝色：

　　

　　这时，webpack检测到文件的修改保存操做，而后自动执行了打包操做。

　　咱们到浏览器中去看下效果：

　　哇哦，边框颜色改变成了蓝色！

　　1. 时间戳没变，说明咱们的浏览器并非所有刷新。

　　2. 开发工具中的网络请求多了两个请求，一个是向服务器发起询问，判断是否有更新内容，二是向服务器获取更新内容的部分，注意不是所有代码，只是修改的片断。

　　这个部分强烈建议你们实际动手操做体验一下具体的效果。

　　

　　模块热部署的确很好用，能让咱们在即时不刷新浏览器的状况下也能看到修改后的页面效果。

　　可是这个技术目前只是在试验阶段，可能会存在一些BUG，因此不建议你们在生产环境中使用，在开发环境中体验一下到是没啥问题。

　　另外，值得一说的是，使用HMR之后，会必定程度的增长bundle的文件大小。

　　下图是未使用HMR模式时，bundle文件index.js为170kb

　　

　　使用HMR模式之后，文件增大到177Kb，请注意我这里功能比较简单，并且对代码进行了压缩，因此可能看上去差异不是很大。

　　

 

　　小结

　　　　经过配置webpack-dev-server，但愿能将前端开发人员从这些重复性的打包构建的工做中解放出来，将时间与精力投放在实际的业务代码开发上去。