webpack 打包、配置优化

tree shaking （webpack V4.0之后 mode为produciton时 默认支持）

Tree Shaking的含义是把一个模块里没用的东西都摇晃掉。

一个模块可以理解为一个文件，例如a.js，里面会导出很多内容，当我们去引入这个树的一部分，那么引用的部分做打包，不引入的部分剔除掉，这就是tree shaking概念。

注意：Tree Shaking只支持ES Moudule的引入，也就是支持import模块的引入，如果使用const add = require('./a.js)这种Common JS的引入方式，那么Tree Shaking是不支持的，这是因为import这种ES Moudule的引入方式，它的底层是一个静态引入的方式，而Common JS是一种动态引入的方式，Tree Shaking只支持静态引入的方式。
原理：

利用了es6模块的特点： 只能作为模块顶层的语句出现；import的模块名只能是字符串常量；import binding是immutable的。

代码擦除：uglify阶段删除无用代码

代码分割

意义：对于大的Web应⽤来讲，将所有的代码都放在⼀个⽂件中显然是不够有效的，特别是当你的某些代码块是在某些特殊的时候才会被使用到。webpack有⼀个功能就是将你的代码库分割成chunks（语块），当代码运行到需要它们的时候再进行加载。

适用场景：抽离相同代码到一个共享块；脚本加载，使得初始下载的代码更小。

懒加载js的方式：

CommonJS 使用require.ensure

ES6使用动态的import（目前没有原生支持，需要babel转换）

如何使用动态import？

1. 安装babel插件    npm i @babel/plugin-syntax-dynamic-import --save-dev

2. 配置.babelrc文件的plugins: ["@babel/plugin-syntax-dynamic-import"]

ESLint

优秀的eslint规范实践：

Airbnb： eslint-config-airbnb   、eslint-config-airbnb-base

腾讯：alloyteam团队的eslint-config-alloy   、ivweb团队的 eslint-config-ivweb

命令行输出优化

stats 选项让你更精确地控制 bundle 信息该怎么显示。 如果你不希望使用 quiet 或 noInfo 这样的不显示信息，而是又不想得到全部的信息，只是想要获取某部分 bundle 的信息，使用 stats 选项是比较好的折衷方式。

使用friendly-errors-webpack-plugin插件优化构建日志；stats 设置成 errors-only

构建异常和中断处理

webpack v4.0之前构建失败 不会抛出错误码（error code）

node.js 中的process.exit规范：

0: 表示成功完成，回调中的error为null；

非0表示执行失败，回调中的error不为null，error.code就是传给exit的数字。