这个项目尝试用了一些以前没用过的东西，以前项目都是用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打包压缩
2016-07-29 打卡吃饭