loveky的流水账

要讨论Webpack 2中新增的这两个plugin的功能,还要先从使用Webpack打包的项目的前端资源缓存方案说起。 通常在使用了Webpack的项目中我们会使用CommonsChunkPlugin来将所有依赖的第三方包打包到一个名为vender的chunk中。与此同时,为了避免每次更改项目代码时导致vender chunk的chunkHash改变,我们还会单独生成一个manifest chunk。 举个例子,假设我们有一个项目,项目中入口文件为index.js。其内容如下: import add from './src/add'; import leftPad from 'left-pad'; import jsonp from 'jsonp'; add(1, 2); 通常我们的webpack.config.js文件就会有类似如下的配置: const path = require('path'); const webpack = require('webpack'); module.exports = { entry: { 'app': './index.js', 'vender': ['left-pad', 'jsonp'] }, output: { filename: '[name].[chunkHash].js', path: path.resolve(__dirname, 'build') }, resolve: { extensions: ['.js'] }, module: { ... }, plugins:[ new webpack.optimize.CommonsChunkPlugin({ name: ['vender', 'manifest'], minChunks: Infinity, }) ] }; 这时,通过Webpack打包,会生成三个文件: ... Read More
问题 最近在项目中遇到这样一个问题,webpack生成的vender包的哈希值在我和同事的电脑上不一致。由于之前已经配置过了CommonsChunkPlugin(配置如下),所以我们期望的结果是在不同环境下构建出的文件哈希值应该是一致的。 注:只给出了和本文内容相关的配置项 module.exports = { entry: { app: './src/js/app.jsx', vender: [ 'classnames', 'react', 'react-dom', 'redux', 'react-redux', 'redux-promise-middleware', 'updeep', 'axios', 'jdc-rc-list', 'react-router', 'react-router-redux' ] }, output: { path: path.resolve(__dirname, './build/js/'), filename: (isDevelopmentEnvironment ? '[name].bundle.js' : '[name].[chunkhash].js'), chunkFilename: (isDevelopmentEnvironment ? '[name].bundle.js' : '[name].[chunkhash].js') }, plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: ['vender', 'manifest'], minChunks: Infinity, }) ] }; 调查 经过多次验证发现,我们在各自的电脑上多次构建出来的哈希值可以保持一致,只是在两台电脑上不一致。考虑到vender中打包的都是第三方依赖,于是猜测是两台电脑上安装的依赖包不同。接着对比了两人的package.json中的dependencies,完全一致。 考虑到package.json文件中包版本中的^符号匹配的范围比较大。参考npm官方给出的解释: ^1.2.3 := >=1.2.3 <2.0.0 ^0.2.3 := >=0.2.3 <0.3.0 ^0.0.3 := >=0. ... Read More
React Conf 2017的全部视频已经在YouTube上放出来了。为了方便在家里的电视上播放,就全部下载了一套。顺便上传了百度网盘一份。感兴趣的可以看看哦。全部720p。 下载地址: http://pan.baidu.com/s/1gfl5FzX

园博园一日游
26 March 2017

来北京快3年了,之前每次坐高铁回家都会路过园博园。每次透过车窗看到园里漂亮的风景,总会和老婆商量着什么时候来。可惜我住在大东边,园博园在帝都西南角,每次想到坐地铁要2个多小时就放弃了。现在有车了,出行方便了,却又总也想不起来了。昨天还是老婆提议:『我们明天去园博园啊?!』于是俩人一拍即合,来一场说走就走的春游。 订票 确定要去,马上在携程上定了两张门票。原价20,携程上18。(点此订票)注意:携程上买的电子票只能在园区三号门的售票处换票。这点千万注意。 出发 今天早起看天气,格外给力。天很蓝,云很白。吃过早饭,8:40从家出发。一路畅通,只用1个小时就把五环跑了半圈,到达目的地。 到达导航终点遇到了第一个问题,百度地图上搜到位于长顺一路上的停车场都是临时停车场,现在已经关闭了。于是掉头往园区正门开去,一路上有不少车在掉头。看来是不少人都中招了。不过好消息是园区正门有保安在指挥,正门再往西一点点就是正式停车场了。 蓝色圈圈就是停车场的位置。 停好车,背上包往园区正门走。换票很方便,把携程发来的取票码出示给工作人员就好了,购买特价票(包括电子票)必须要出示相关证件哦。排在我前面的一个大姐买了老人票但是没带证件,只好退票重新买。另外一个要注意的就是,园区不允许携带宠物进入。 入园 正门门口 入园后,园区内部是由许多馆/园组成的。比如一进门看到的鄂尔多斯馆、合肥园、荆门园等等。都是以省市或古地名命名的。或大或小,各有特色。随便放几张照片感受下: 晋中园 晋中园内的戏台 合肥园门口的牌楼 粤秀 各种园实在太多,我们自己走的也只是很小一部分,就不一一列举了。有兴趣还是亲自去看一看。下面说三个重点推荐的景观吧。 附一个园区地图(可以右键新窗口打开查看大图) 北京园 北京园应该是园博园里最大的一个园了,毕竟是首都嘛。建筑风格也保持了皇家建筑的大气,威严。 北京园内的主要建筑:聚景阁 古都北京山川形胜写意 忆江南 这里可以说是今天行程最大的收获了。出乎意外的美。置身其中,仿佛一下子去到了江南某个小城的私家园里之中。 永定塔 永定塔位于园内西北部的半山腰上,是园区的最高点,也是我今天走到的最远的位置。老婆在逛完忆江南后就走不动了,找了个长凳休息。于是我开启了暴走模式,直奔永定塔。 终于来到山下,拾阶而上,一路没什么人。 离塔越来越近 途径文源亭 文源亭后是两条铁道,时不时还会有货运列车经过。 在文源亭远眺北京城,可以看到中央电视塔,国贸。这天气,视野真的很不错。 继续上山,偶然发现的隧道。从文字上也看的出很有历史啦。前面提到的两条铁轨就穿过这里从永定塔下穿行而过。 终于来到塔下,可惜并不对外开放。只能在外边看看啦。 餐饮 从永定塔下来已经是下午1点了,还没吃午饭。于是一边往大门走一边找吃的。然而并没有什么收获,要么是路边小亭子里吃泡面,要么是去少数几个餐厅里吃。看到一个吉祥馄炖,走进去看了看就出来了。环境很一般,很多人在打扑克牌,比较吵。上一个菜价单供参考: 最后午饭在石景山华联的呷哺呷哺解决的。从园博园开车过去大约20分钟左右。可选择的的餐馆也很多。比园区里的那些餐饮靠谱多了。 费用小计 最后附一个今天的费用小计,供参考: 园博园停车:20(5元/小时) 园博园门票:36(18元/人) 华联停车:6元 呷哺呷哺:74元
Fiddler可以配置用来拦截https请求。但默认配置下仅支持拦截PC上的请求。在移动端上的https请求会因为证书问题而失败。如下图所示: 要解决这个问题,只需要在iOS/Android系统上安装一个安全证书即可。具体步骤如下: 访问http://www.telerik.com/fiddler/add-ons,下载并安装CertMaker for iOS and Android插件。 安装完成后重启Fiddler。 重启后浏览器访问http://ipv4.fiddler:8888,如果看到如下内容,表示安装成功。 在手机浏览器(iOS建议Safari)里打开前边提到的链接,点击页面中最后一个链接FiddlerRoot certificate。下载完后会提示如下页面: 点击安装,弹出安全认证,要求输入密码。输入后出现以下页面: 继续点击安装。安装成功提示如下: 到这里,所有的配置工作就全部做完了。现在再次访问https页面,已经可以正常打开了。