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

webpack练手项目:easySlide(一)

发布时间:2015-12-01 11:00:43
最近在学习webpack,正好拿了之前做的一个小组件,图片轮播来做了下练手,让我们一起来初步感受下webpack的神奇魅力。  webpack是一个前端的打包管理工具,大家可以前往:http://webpack.github.io/ 作详细了解。相对于之 ...

   最近在学习webpack,正好拿了之前做的一个小组件,图片轮播来做了下练手,让我们一起来初步感受下webpack的神奇魅力。

     webpack是一个前端的打包管理工具,大家可以前往:http://webpack.github.io/ 作详细了解。相对于之前的前端模块打包工具,

  个人认为webpack至少拥有以下值得我们拿来一用的优点:

  •   js/css/img/html等等都是静态资源,都可以通过webpack进行打包处理
  • 所有资源都可以按需加载,避免了之前的加载器把所有资源打包在一个文件,导致文件过大而且不需要的模块也加载出来;同时也避免了将资源按照独立文件进行打包,从而导致大量的HTTP请求造成降低页面性能
  • 提供了很多前端打包所需要的配套小插件,比如:JS压缩,JSHint,图片压缩等等
  • 完美兼容了AMD和CommonJS以及ES6语法,大家之前写的模块不用再重新进行改造了。

  当前很多优点是我没有提及的或者还没有了解到的,但是目前这几个优点来说,已经算是可以完全满足我们在项目中的实际打包需求了。

  这次算是把webpack模块打包与之前的一篇文章: http://www.cnblogs.com/souvenir/p/4977407.html  中提及的图片轮播二者结合起来,一起与大家进行分享。

 

  1.先看DEMO

    同样的,这次我也将这次写的DEMO代码分享到Github上,大家可以自行前往查看源码:  https://github.com/xiaoyunchen/easySlide/

    最后的页面效果大家可以访问 http://xiaoyunchen.github.io/easySlide/  进行查看。

    功能很简单:

    可以看到,我们在这个页面上做了两个图片轮播效果,而且两个图片轮播的时间间隔与动画时长都是独立的,互不干扰。

    webpack练手项目:easySlide(一)

  2.准备工作

      在开始学习webpack打包之前,我们先要做一些准备工作。第一步当然安装nodejs了,然后再使用npm命令安装webpack以及我们所需要的几个加载器:   

npm install webpack -gnpm install jquery@1npm install css-loadernpm install style-loader

原标题:webpack练手项目:easySlide(一)

关键词:web

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