webpack@4.x的变化
先来说下webpack4和之前版本里一些主要的变化：
1、webpack不再支持node v4，这是因为新的webpack和附属插件使用了es6的语法，v4版本对es6不是很到位，所以，就不伺候了。
2、开始采取约定优于配置的思路，webpack@4.x里把很多选项都设置了默认值，比如入口就是./src，输出目录就是./dist，当然如果你自己去设置，它也不会拦着。所以在用webpack@4.x的时候，我们甚至都可以没有webpack.config.js这个配置文件也能一样打包。
3、拆分了旧版本里的webpack，分成了用来处理逻辑的webpack和提供可执行命令的webpack-cli，这也是有的同学把webpack装成新版本以后会报找不到webpack-cli模块这个错误的原因。
4、添加了mode选项，用来区分编译的环境，提供了development、production和none三个选项，理论上这个选项是强制指定的，其实不指定的话它也是有默认值的，但会给出一个warning，官方这么强烈建议了，就显式的指定一下吧。指定方式有两种，一是在启动命令里：
./node_modules/.bin/webpack --mode production
另外一种就是在配置文件里指定，方式如下：
var config = { mode: 'production' // 可选development、production和none }
5、配置上的变动，类似删除了commonChunksPlugin，用optimization来代替这种。还有loader的用法也和1.15.0不一样了，但这个升级是在之前版本里就有的，不是webpack@4.x带来的。
6、性能优化，提高了打包性能。另外从webpack2起，引入了Tree-shaking机制来提出没有被引用的模块。它的原理是按着引用关系重新建立一个新的依赖树，而没有被引用的模块就不会被打包到最后的代码里。之前的压缩优化方式是先把所有模块都挂到树上，然后通过分析后，删掉没被引用的模块。从字面意思来看，我觉得原来的方式更像在摇树，把没用的摇下来。这两种方式最后压缩完的结果可能类似，但设计思路完全是从两个方向走的。
7、其他。以上这些就是一些比较主要的变化，更详细的升级文档可以参考下官方的说明：https://github.com/webpack/webpack/releases
前言
升级webpack4，一定要去看文档，特别是 更新说明 ，不要自持用过原本webpack就自己开始折腾。折腾到后面，可能就默默流下眼泪了。
webpack4的变化
webpack-cli抽离
webpack-cli被单独拆了出来，使用的时候如果只是全局装了CLI，直接执行的时候是可以的。
webpack --config ./config/webpack.dev.js
如果是写在npm hook里面会发现有点问题：
//package.json "scripts": { "dev": "webpack --config ./config/webpack.dev.js" } //shall npm run dev
此时就会给提示：
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
- webpack-cli (https://github.com/webpack/webpack-cli)
The original webpack full-featured CLI.
- webpack-command (https://github.com/webpack-contrib/webpack-command)
A lightweight, opinionated webpack CLI.
We will use "npm" to install the CLI via "npm install -D".
Which one do you like to install (webpack-cli/webpack-command):
如果是我没有全局装，我肯定会意识到要选一个，这个坑关键是我全局装了。所以就在那折腾半天。
其实官方文档开头就说明了。
npm install webpack webpack-cli --save-dev
安装完成之后，继续执行发现有warning：
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
mode规则
配置规则：必须在production 和 development之间选择一种,以便webpack 使用相应模式的内置优化
production支持所有类型的优化已生成最优bundles
development允许注释、提示和eval devtool devtool的差别可以参考这里
production不支持watching、development针对快速增量重建进行了优化
production支持 module concatenating（Scope Hoisting）即作用域提升，可以将模块打包在一个函数里，这样减少了函数声明，文件体积也会减小。 详细参考看这里
process.env.NODE_ENV被设置用来区分环境（仅仅在构建代码而非config里面)
有一个hidden none mode的模式可以禁用所有内容
用法：
1、配置文件中：
module.exports = { entry: Entrys, mode: 'development' }
2、cli 参数传入
webpack --mode=development
两种方式都是可行的，不过我遇到过一个很坑的问题，困扰自己好几天，最后知道真相的自己眼泪掉下来后面再提这个问题。
零配置快速开始
因为一直被吐槽配置太累，加上parcel给的压力，webpack4也支持零配置打包了。
如果没有配置文件，会默认以./src/index.js作为entry开始打包。
如果配置了webpack.config.js或者指定了--config 的文件路径，则依据对应配置文件开始。
问题表现
在webpack.config.js中配置了entry、mode等相关属性，配置文件如下：