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