webpack和grunt打包使用总结

这个项目尝试用了一些以前没用过的东西,以前项目都是用grunt去打包项目的,这次尝试用了一下webpack,这玩意并不怎么好用(跟我们自己项目的结构有关吧)。因为webpack要把所有东西都模块化,所以所有东西都要require。尴尬的是像我们这种H5页面里面有视频和音频,用webpack打包的时候它不会将这些资源打到dist目录下去,只能手动复制过去,文件少的时候也还可以接受,多的时候就操蛋了。只能结合grunt或者gulp一起来解决这个问题了。

由于这个项目最后是要交接给别人进行二次开发的,所以为了修改方便在html只是写了大体的结构,里面的内容都是用handlebars进行添加的,这样直接打到js里面去,以后有啥修改的话就直接fiddler代理修改就行了。不过handlebars有个坑的就是不能像dot那样直接在模板中写条件判断,handlebars中只认true or false,所有在填充数据的时候,如有需要对数据进行一下处理。handlebars其实我在这个项目中用的比较少,所有很多功能还不是很熟悉。

这个项目比较简单,遇到的bug有以下两点:

1、视频开始播放的时候会出现黑屏情况。

其实这属于正常情况,因为视频 or 音频在手机上不能进行预加载,只有操作后才会去进行加载,在网络不好的情况下出息黑屏也是正常。但是客户不跟你谈这个- -、 所以想了两种方法来缓解黑屏的情况。

(1)加上淡入淡出动画setTimtout去控制,切换的时候过度一下,缓解一下加载。

(2)用timeupdate去控制,点击是不隐藏loading(我的上一页是loading),判断timeupdate>0然后重新绑定另外一个新的timeupdate事件,这时候隐藏loading同时show出视频。这种方案虽然没有黑屏的情况,但会出现假死情况(以为点击按钮没反应)、所以客户拒绝了。

(3)尼玛我还没想到怎么搞。

2、backgournd-szie失效。

这个问题我也醉了,我最开始的写法是这样的:

background: #080b14 url(../img/bg_load.png) no-repeat center; / 668px/2 auto;

iPhone or android手机也测试了不少,最后倒在了小米5上了,这样写backgournd-szie无效。没办法只能乖乖的按照以前的写法把size提出来标准的webkit前缀的都写上(还是有手机不认标准,只认前缀的)。


下面来扯扯我第一次用webpack吧

一、安装

npm install webpack -g

二、配置文件

1、文件出入口:

entry: {
     main: "./src/js/index.js",
     share: "./src/js/share.js"
},
output: {
     path: '.',
     filename: "./dist/js/[name].js",
     publicPath: ''
},

entry可以有多个入口文件,output的filename中的js文件名用[name]代替之后会打包出对应的js。

publicPath这个可以写上文件的cdn地址。

2、加载器loaders, 基本由以下构成不同的文件有不同的loader。

module: {
     loaders: [
     {
          test: //.hbs/,   //需要解析文件
          loader: "handlebars-loader", //解析模块
          exclude: /(node_modules)/ //排除文件
     }]
}

3、resolve(其他的配置)

resolve: {
     alias: {
          'zepto': './lib/zepto.min.js' //别名
      },
     extensions: [] //自动补齐后缀
},

4、externals(定个全局变量?)

externals: {
     'global' : 'window.global'
},

5、plugins(插件)

plugins: [
//压缩
     new webpack.optimize.UglifyJsPlugin({   
          compress: {
               warnings: false
          },
     })
]

备注:通常我喜欢把这个压缩写在另外config来运行,不然每次都压缩都不好调试。

三、调试

调试的时候很烦每次都要webpack一下,虽然有webpack –watch这玩意,但路径有时候很操蛋,所以利用webpack-dev-server来开启一个本地服务来玩。

直接运行webpack-dev-server加上一些参数就可以开启了。

tx-hj@1.0.0 dev D:/project/tx-hj-20160711/web
> webpack-dev-server --devtool eval --progress --colors --hot --inline

70% 1/1 build moduleshttp://localhost:8080/
webpack result is served from /
content is served from D:/project/tx-hj-20160711/web
Hash: 33831adb2b78d5c21479
Version: webpack 1.13.1
Time: 3984ms
......

webpack-dev-server的配置直接上官网吧,其中有一个很好玩的东西热加载(–hot –inline),由于我这个项目的原因不能发挥它强大的功能只能做个自动刷新- -、不过也挺好的至少不用手动刷新。不过调试完成之后,还是要手动打包一下,因为webpack-dev-server实际只是在你的内存中dist了一下并非在你的目录中dist了。所以调试完成后需要手动webpack一下。

为了提高工作效率,不同每次都去敲那么长的命令,然后就利用package.json里面的script来运行,我把我需要的工作的命令配置在script,如下所示:

"scripts": {
   "dist": "webpack",  //打包不压缩
   "dev": "webpack-dev-server --devtool eval --progress --colors --hot --inline",  //开启服务
   "deploy": "webpack --config webpack.production.config.js"   //使用另外的config打包压缩
},

配置之后需要哪功能个直接在cmd中运行哪个

npm run dist     //打包不压缩
npm run dev      //开启服务
npm run deploy   //使用另外的config打包压缩

原文地址:https://flowers1225.com/lessons/2016/07/29/1

WEBGL学习网(WebGLStudy.COM)专注提供WebGL 、ThreeJS、BabylonJS等WEB3D开发案例源码下载。
声明信息:
1. 本站部分资源来源于用户上传和网络,如有侵权请邮件联系站长:1218436398@qq.com!我们将尽快处理。
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源打赏售价用于赞助本站提供的服务支出(包括不限服务器、网络带宽等费用支出)!
7.欢迎加QQ群学习交流:549297468 ,或者搜索微信公众号:WebGL学习网
WEBGL学习网 » webpack和grunt打包使用总结

发表评论

提供优质的WebGL、ThreeJS源码

立即查看 了解详情