你的位置:首页 > Java教程

[Java教程]webpack练手项目之easySlide(三):commonChunks


Hello,大家好。

  在之前两篇文章中:

    webpack练手项目之easySlide(一):初探webpack 

    webpack练手项目之easySlide(二):代码分割

   与大家分享了webpack的基本使用方法,以及使用webpack对代码进行分割,根据需求进行异步加载。

  今天我们继续为大家介绍webpack的其他应用方法,主要包括common chunks以及web-dev-server。

 

  1.Demo与Code

  在实际的项目开发过程中,我们的项目中会有很多公共的部分,比如一些第三方的组件,CSS样式等。通过添加一些配置,webpack在打包过程中自动的提取出这些公共元素,并将其打包到一个独立的文件中。在页面上我们只需要引入这个公共的脚本以及页面单独的脚本即可。

  如果大家注意的话,在上一章中我们使用的Demo就已经使用了common chunks:

  Demo:http://xiaoyunchen.github.io/easySlide/

  Code:https://github.com/xiaoyunchen/easySlide

  为了演示效果,我们新增了一个页面入口,叫做jsEvent.html,现实的功能也就是之前在  http://www.cnblogs.com/souvenir/p/4988367.html 已经实现的功能,演示JS事件流的传播。只是这次稍微将代码改成模块化的形式。

  OK。同一个项目下有两个页面(实际项目中会更多入口或者页面),这两个页面都需要引用一些公共的组件,比如头部导航菜单,footer脚部信息等,这些组件一般都是全站通用的,然后每个页面进行单独调用即可。

  我们在项目下增加了一个jsEvent的模块,引入了jsEvent的页面和调用JS:

  

  

    关于jsEvent模块的实现我们稍后再看,先来看看jsEvent入口JS文件的内容:

 1 (function(){ 2   //引入公共CSS与页面CSS 3   require('../../css/vendor/reset.css'); 4   require('../../css/page/jsEvent.css'); 5   require('../../css/module/footer.css'); 6    7   //引入header 8   require("../module/header.js"); 9   10   //引入jsEvent模块11   var Delegate=require("../module/jsEvent.js");12   var delegate=new Delegate();13   delegate.addBodyListener();14   delegate.addListElement($('#list1'),$('#btn1'));15   delegate.addListElement($('#list2'),$('#btn2'));16   17 })();

  同样的,前三行代码我们先引入了公共CSS和本页面所需的CSS。

  第8行:引入了header模块。因为header模块除了样式以外只有一个页面滚动式固定的功能,所以这里也需要调用其任何方法,只需引入该模块即可。

  第11-15行:引入jsEvent模块,并配置相关事件监听。关于jsEvent这个模块的实现大家可以查看之前的文章或者源码,这里不再作赘述。

  同样的大家可以再来回顾一下Index.js的源码:

  

  是的,前面引入公共CSS以及引入header部分是完全一致的,这也就是我们所说的common chunks公共部分。

  接下来我们再来看webpack.config.js中的配置内容:

  

  在配置文件中先定义了这两个入口文件:Index与delegate,然后这里新引入了一个新的插件:CommonsChunkPlugin (官方文档)

  

new webpack.optimize.CommonsChunkPlugin("commons.js", ["index", "delegate"])

  通过这句代码我们将Index与delegate中的公共部分提取出来并放置在commons.js这个单独的文件中,所以我们在页面中除了需要引入index/jsevent以外,还需要引入这个commons。

  

  再来看看CommonsChunkPlugin 的其他配置选项:

  minChunks :公共模块被使用的最小次数。比如配置为3,也就是同一个模块只有被3个以外的页面同时引用时才会被提取出来作为common chunks。

  minSize:作用类似于minChunks,只不过这里控制的文件大小。

  children:这个参数比较有意思,他可以将common chunks不单独存放,而是将其加入到所引用的页面JS中进行合并。关于这个参数我也定义了一个webpack.config2.js以及index2.html用于测试,大家使用 webpack --config webpack.config2.js 就能单独打一次包,然后发现这次并没有生成commons.js,因为已经被加入到index.js中,所以在index2.html我们只需要引入bundle.js即可。(咦,怎么感觉又回去了呢)

 

  2.header组件

  这是一个单独的组件,功能比较简单,作为页面的一个导航,同时在页面滚动的时候固定在最顶部。

  我们来看看具体的实现代码:

  

 1 (function(){ 2   require('../../css/module/header.css'); 3    4   var headerModule={ 5     config:{  //配置信息,头部class/多少高度触发fixed,fixed class名 6       headerDom:$('.headerWrapper'), 7       fixedTop:80, 8       fixedCls:'header-fixed' 9     },10     headerFixed:function(){    //切换class11       if ($(window).scrollTop()>headerModule.config.fixedTop){12         headerModule.config.headerDom.addClass(headerModule.config.fixedCls);13       }else{14         headerModule.config.headerDom.removeClass(headerModule.config.fixedCls);15       }16     },17     init:function(){    //为window绑定scroll事件18       $(window).bind('scroll',function(){19         headerModule.headerFixed();20       });21     }22   };23   headerModule.init();24   module.exports=null;25 })();

  

  第2行,不多说,引入header模块所需要的css样式。

  第4行,定义了header组件的实现变量;

  第5行,定义了一些配置信息,具体信息大家看注释。

  第10行,headerFixed:判断当前滚动的高度是否大于咱们的配置,如果是的话就添加一个class。

  第17行,init行数:初始化函数,为window绑定了这个scroll滚动事件。

  第23-24行,主动调用了init行数,所以这里我们的exports为null,没有任何需要导出的内容。

  

  这里需要一下两个问题:

  1.关于header的html模板,这里没有加载器来做异步加载,而是直接写在每个页面中的,其实有些增加了维护工作量。实际项目的做法应该是将这个header.html的模板文件独立出来,然后通过后端的语法(比如PHP或者Java)来进行引入。这个工作如果由前端来完成的话,需要单独一个HTTP请求同时需要重新渲染DOM,比较消耗浏览器的性能,所以不推荐。

  2.关于header模块的配置信息。根据一般组件的做法,这个参数应该是需要是暴露接口,让调用者可以修改的,但是我们考略到header的特殊性,作为全站的导航菜单,一般都是样式与功能统一的,所以这里并没有开放修改接口。

  

  好的,我们来看下最后的页面效果:

  

 

  当我们滚动向下滚动页面后,header上增加了一个class,将header固定在了页面顶部。

 

  3.web-dev-server

   这里再单独介绍一个webpack的小功能:web-dev-server.

  这个功能的作用在于每次修改保存后,webpack将会自动重新对资源进行打包,并且自动刷新页面。(使用的是socket.io进行通信)

  首先通过npm安装web-dev-server

npm install web-dev-server --save--dev

  安装完成后再通过  web-dev-server 即可启动server,启动成功后命令行会出现如下的提示:

webpack:bundle is now VALID.

  然后我们只需要访问  http://localhost:8080/ 就可以访问到我们的项目页面。

  可以尝试修改一下任何一个资源文件,然后会发现控制台上webpack重新进行了编译,而且浏览器也自动进行了刷新,无需我们手动干预。(双屏开发的同学可以开始鼓掌了...)

 

 

    小结:

      截止到这里为止,我们对webpack的学习就暂时告一个段落。

      webpack是一款非常优秀的前端模块化打包工具,他还有很多实用的功能,因为目前我的项目中还没有涉及到,所以还没来得及做深入研究。比如对react/angularjs这样的前端框架,LESS/JADE等这些模板或者css工具的编译与支持,同时还兼容了AMD/CommonJS/ES6语法,功能十分强大,值得我们好好研究。