@loveky
2017/4/26
今天节目的主要内容有
bundle文件分析
打包出来的文件那么大，都包含哪些内容？
bundle真的有必要那么大吗？
https://chrisbateman.github.io/webpack-visualizer/
实战：PC图文定制项目
生成数据文件
webpack --json > stats.json
优化前
优化后
编译私有依赖包
一切都很美好
直到有一天你决定发布一个通用模块到私有npm
npm.jd.com
or
npm.m.jd.com
这些私有npm包也想用ES6语法开发
但是该用何种模块规范发布呢？
ES6 还是 CommonJS？
正向否定预查
https://en.wikipedia.org/wiki/Regular_expression
manifest文件
先从一个“最简单“的项目说起
第一次构建
第二次构建
网上好像说要搞一个什么manifest文件
先改改试试吧，万一能行呢
发生了什么？
manifest.js文件中有什么？
manifest是如何工作的？
module id
直到
你添加了一个新文件
让我们比较一下两次构建的输出信息
找到一种和文件顺序无关的模块ID命名方式
NamedModulesPlugin
HashedModuleIdsPlugin
依赖包版本锁定
另一位小伙伴开始参与这个项目
两个小伙伴同时开发
你发现两个人交替构建
vender文件的hash值不断变化
开始怀疑人生
^1.2.3 := >=1.2.3 <2.0.0 ^0.2.3 := >=0.2.3 <0.3.0 ^0.0.3 := >=0.0.3 <0.0.4
npm ls --depth 0 --prod
解决方案：锁定版本号
方案一
npm install –save-exact/-E
只能控制你直接依赖的包（也就是出现在package.json里的那些）。假设你依赖了包A，包A又依赖了包B。那么即使你使用了-E参数安装包A，由于包A内部没有写死包B的版本号，还是有可能得到不一致的依赖树
方案二
npm-shrinkwrap.json
npm install --save-dev left-pad npm prune npm shrinkwrap --dev
–dev参数告诉npm shrinkwrap要在输出中包含devDependencies的版本信息。从npm 4.0.1起，不在需要额外指定此参数
安装一个依赖包，原来只需要一条命令，现在却需要三条命令。不方便。
方案三
yarn
今天节目的主要内容就播送到这里了
下期再见
Webpack2中的NamedModulesPlugin与HashedModuleIdsPlugin
在JavaScript项目中锁定npm依赖包版本
By loveky
