记一次webapck4 配置文件无效的解决历程

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" }//shallnpm run dev