webpack4

还好前面写webpack3.x稍微赶上了点热度,最近在准备重构,还在考虑要不要使用parcel,正好发布了webpack4.0.0，就研究了下,修改还是比较大的。包含了大量的特性更新, 以及极大的性能优化(最高可达 98%)Webpack 4 中移除了 CommonsChunkPlugin, 替换以一系列默认的配置以及简单的 optimize.splitChunks 接口同时 Webpack 4 为我们带来了 mode 的配置项, 允许开发者根据不同的需求选择是面向开发环境优化还是生产环境优化, 从而降低了初学者的门槛更多变化。
webpack4.0.0更新
下面摘取其中比较重要的几个点

变化

不再支持nodejs4以下的版本
1.您现在必须选择（mode或–mode）两种模式：生产或开发
生产能够实现各种优化以生成优化的捆绑包
生产不支持观看，开发针对快速增量重建进行了优化
生产也使模块连接（范围提升）
process.env.NODE_ENV 被设置为生产或开发（仅在构建代码中，而不是在配置中）

2.您不再需要使用这些插件：
NoEmitOnErrorsPlugin- > optimization.noEmitOnErrors（默认情况下处于生产模式）
ModuleConcatenationPlugin- > optimization.concatenateModules（默认情况下处于生产模式）
NamedModulesPlugin- > optimization.namedModules（在开发模式下默认开启）
CommonsChunkPlugin 被删除 - > optimization.splitChunks

特点

webpack现在支持这些模块类型：
javascript / auto：（webpack 3中的默认版本）启用了所有模块系统的Javascript模块：CommonJS，AMD，ESM
javascript / esm：EcmaScript模块，所有其他模块系统都不可用
javascript / dynamic：只有CommonJS和EcmaScript模块不可用
json：JSON数据，可通过require和import获取
webassembly / experimental：WebAssembly模块（目前是实验性的）
WebAssembly模块
可以导入其他模块（JS和WASM）
来自WebAssembly模块的导出通过ESM导入进行验证
尝试从WASM导入不存在的导出时，您会收到警告/错误
只能用于异步块。它们不起作用（对网络性能不利）
使用WASM通过导入模块 import()
optimization.splitChunks选项介绍
https：//gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693

下面的太冗长了,就不贴了

我们在社区中请求大家对 webpack 4 进行构建性能测试，得出的结果非常有趣。结果很惊人，构建时间降低了 60%-98%！！
性能测试过程中也发现了一些 loader 的 bug 我们已经及时修复了！！计划在v5版实现多进程，或者缓存功能。进一步提高性能.

Mode, 零配置以及默认值

webpack 新增了一个 mode 配置项。mode 有两个值：development 或者是 production，默认值是 production。mode 是我们为减小生产环境构建体积以及节约开发环境的构建时间提供的一种优化方案。entry，output 这些配置项也都有默认值了。这意味着你不需要每次都配置它们了，当然包括 mode。这可能意味着从现在开始，在我们做出如此巨大改变之后，你的配置文件会变得非常小！

WebAssembly 支持

Webpack 现在默认支持在任何本地 WebAssembly 模块中的 import 和 export 语句。这意味着你可以直接在 Rust, C++, C 或者其它 WebAssembly 支持语言中使用 import。

总结

: 估计受到了parcel的威胁,在构建速度和配置这两个比较不好的方面有了极大的提升,但是并未做到极致,可以用webpack-cli以体验webpack4.0.0的功能,目前vue-cli目前还不支持,可以再vue-cli的包里查看版本@vue/cli-service/package.json中查看webpack版本