你的位置:首页 > 软件开发 > Java > webpack练手项目之easySlide(三):commonChunks

webpack练手项目之easySlide(三):commonChunks

发布时间:2015-12-02 16:00:16
Hello,大家好。  在之前两篇文章中:    webpack练手项目之easySlide(一):初探webpack     webpack练手项目之easySlide(二):代码分割   与大家分享了webpack的基本使用方法,以及使用webpack对代码进行分割,根 ...

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:

  webpack练手项目之easySlide(三):commonChunks

  

    关于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 })();

原标题:webpack练手项目之easySlide(三):commonChunks

关键词:web

web
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。