你的位置:首页 > Java教程

[Java教程]基于webpack的前端工程化开发解决方案探索(三):webpack


  

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

  

  一、代码压缩

  在开始了解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: false4       },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主要打包功能)已经基本上配置完成。

 

  

  二、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!

  

  

  三、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,希望能将前端开发人员从这些重复性的打包构建的工作中解放出来,将时间与精力投放在实际的业务代码开发上去。