介绍
Webpack是现代 JavaScript 应用程序的静态模块打包器。它有助于捆绑所有不同的模块并将它们打包成一个或多个包。
本周，Webpack 4 发布，提供了新的特性和改进。本文探讨了 Webpack 4 中的新特性和改进。
要开始使用 webpack 4，请使用 npm 在您的项目中安装：
- npm install webpack webpack-cli --save-dev
你也可以用 Yarn 安装它：
- yarn add webpack webpack-cli --dev
Node.js 支持
Webpack 4 不再支持 Node.js 4。做出这个决定是为了利用现代 ES6 语法，从而产生更清晰、更稳定的代码库。
需要注意的是，使用旧版本 Webpack 的项目可能会降低性能，因为现在正在使用现代 JavaScript 语法。
提高构建速度
由于性能改进，现在使用 Webpack 4 可以保证您项目的构建时间减少多达 98%。
下图分别显示了使用 Webpack 3 和 Webpack 4 的项目的构建时间：
Webpack 3 在 1350 毫秒内构建了该项目。Webpack 4 在 865 毫秒内构建了该项目：
模式属性
Webpack 4 附带了一个名为的属性mode，它允许您设置您正在使用的环境：development或production. 每个选项都有自己的优点和用法。
将 设置为通过以下功能为您提供最佳开发体验，mode从而development使您可以专注于构建：
- 浏览器调试工具。
- 注释、详细的错误消息和开发提示已启用。
- 快速和优化的增量重建。
设置mode于production为您提供最好的选择，需要部署你的项目，如违约：
- 生成优化包的优化。
- 模块连接（范围提升）。
- 更小的输出尺寸。
- 排除开发专用代码。
如果mode未设置，webpack 将始终抛出错误，如下图所示：
您可以将webpack.config.js文件中的模式设置为development或production。
module.exports = {
mode: 'development'
}
或者
module.exports = {
mode: 'production'
}
该mode酒店也接受none的替代development或者production，如果你想要做掉与Wepback和禁止一切抛出的错误。
插件和优化
的CommonsChunkPlugin是在4的WebPack除去和已被替换为一组缺省值和API调用的optimization.splitChunks和optimization.runtimeChunk。这意味着您现在可以为您自动生成共享块。其他一些插件也在版本 4 中被弃用。
NoEmitOnErrorsPlugin已弃用，现在是optimization.noEmitOnErrors. 它在生产模式下默认设置为打开ModuleConcatenationPlugin已弃用，现在是optimization.concatenateModules. 它在生产模式下默认设置为打开- NamedModulesPlugin 已被弃用，现在是
optimization.namedModules. 它在生产模式下默认设置为打开
为了提高性能并获得最佳优化，UglifyJs 现在默认在 webpack 4 中缓存和并行化。
新模块类型
Webpack 现在支持这些模块类型：
- javascript/auto : (webpack 3 中的默认值) 启用所有模块系统的 Javascript 模块：CommonJS、AMD、ESM
- javascript/ esm : EcmaScript 模块，所有其他模块系统不可用
- javascript/dynamic : 只有 CommonJS 和 EcmaScript 模块不可用
- json : JSON 数据，可通过 require 和 import 获取
- webassembly/experimental：WebAssembly 模块（目前是实验性的）
javascript/auto 曾经是 Webpack 3 中的默认模块，但 Webpack 4 从代码库中完全抽象出 JavaScript 特异性以允许进行这种更改，以便用户可以指定他们想要的模块类型。
此外，将的WebPack寻找的.wasm，.mjs，.js和.json顺序扩展。
0CJS
0CJS 意味着零配置应用程序。它的想法是您需要最少或零配置才能启动和运行 JavaScript 项目。这是相对较新的打包程序的前提，Parcel也可以运行。您不需要配置文件即可开始构建您的应用程序。
在第 4 版中，Webpack 不再需要webpack.config.js文件。
您需要做的就是拥有一个./src/index.js文件。每当您webpack在终端中运行该命令时，Webpack 都知道使用该文件作为应用程序的入口点。这对于小型项目可能会派上用场。
其他更新
- 死分支现在由 Webpack 本身删除。之前 Uglify 已经完成了这项工作，但现在 Webpack 负责删除死代码。
import()现在支持webpackInclude并webpackExclude作为一个神奇的评论。这允许在使用动态表达式时过滤文件。System.import()现在在您的代码中使用会发出温和的警告。import()建议。- UglifyJs 现在默认缓存并并行运行。
- 脚本标签不再使用
text/javascript，async因为这是默认值。这节省了几个字节。
结论
这些只是 webpack 4 中众多功能中的一部分。 还有很多值得期待的更新和改进，例如：
- HTML/CSS 模块。这意味着您可以使用 HTML/CSS 文件作为入口点。
- 持久缓存。
- 多线程和多核。
- 将 WebAssembly 支持从实验性变为稳定。
你可以在这里查看 webpack 4 的完整发布日志。
