Webpack 是一个流行的前端打包工具,用于将代码和资产打包成一个或多个 bundle,并在浏览器中引入。随着 Webpack 版本的迭代,Webpack 4 已经成为了最新的版本,并且带来了许多改进和新功能。本文将介绍 Webpack 4 的新功能和如何将现有的基于 Webpack 3 的项目升级到 Webpack 4。
Webpack 4 的新功能
Webpack 4 带来了一些新的功能和改进:
默认使用模式(Mode)
现在,Webpack 4 会默认根据 process.env.NODE_ENV
的值设置 mode。这意味着不需要在配置文件中显式指定 mode
。
新的配置文件命名规则
Webpack 4 配置文件的默认命名规则已更改。现在,webpack.config.js
是默认的配置文件,并且不需要在命令行中指定任何文件名。如果要使用不同的文件名,则需要通过命令选项 --config
显式指定。
更快的构建
Webpack 4 通过增加缓存和删除不必要的插件和加载器来提高构建速度,特别是在开发者模式下。
可选地使用 async
/await
使用 async
/await
代替 Promise
来管理异步行为已成为新的趋势。Webpack 4 可以处理 async
/await
,从而提高了代码的可读性和可维护性。
详细的 Webpack 4 的新功能列表请参见官方文档。
升级到 Webpack 4
升级到 Webpack 4 有一些必要的步骤。下面是一个基于 Webpack 3 的示例项目的升级指南:
第一步:备份项目
在进行任何重大升级之前,务必备份项目。这可以避免在出现问题时丢失任何数据。
第二步:全局升级 Webpack 依赖
升级 Webpack 可以使用以下命令:
--- ------- ---------- --------- -----------
第三步:更新配置文件
Webpack 4 的配置文件需要更新以支持新的功能和语法。以下是一些需要注意的更改:
3.x 中的配置项明显变更
配置项 | 3.x | 4.x |
---|---|---|
entry | string / object | object |
output | object | object |
module.rules | array of objects | array of rules |
plugins | array of objects | array of plugins |
除了这些变更,其他配置选项的语法也存在一些变化。更多细节请参见 官方文档。
设置 Mode
由于 Webpack 4 默认使用 mode,我们可以在配置文件中去掉这个选项声明。如果你有自定义逻辑,你需要显式设置该参数。
-------------- - - ----- ------------- -- ------------------------ -- --- -
配置文件命名
Webpack 4 的配置文件默认命名为 webpack.config.js
,而不是 webpack.config.dev.js
或 webpack.config.prod.js
。 这也是一个需要注意的变化,更改设置 --config
选项仍然可以使用。
-- ----------------- -------------- - - -- --- -
配置文件简化
Webpack 4 提供了很多新特性,这意味着可以简化配置文件。以下是一个简化的示例:
-- ----------------- ----- ---- - ---------------- -------------- - - ----- ------------- -- ------------ ------ ----------------- ------- - ----- ----------------------- -------- --------- ----------- - --
第四步:更新插件和加载器
Webpack 4 可能需要更新您使用的插件和加载器以确保与新版本兼容。插件和加载器经过重新设计和重构,以更好地支持新的配置方法和 Webpack 4 的新功能。我们可以在 webpack
官网的库搜索页面找到这些插件和加载器并查看其版本是否符合要求。
第五步:执行构建
一旦更新了依赖项并且修改了配置文件,就可以尝试进行构建并检查是否有任何错误。
--- --- -----
结论
本文总结了 Webpack 4 的新功能,并提供了基于 Webpack 3 的示例项目的升级指南。因为 Webpack 4 的变化很大,所以在进行升级之前备份你的项目非常重要。如果你遇到问题,你可以引用 webpack 官方文档进行解决。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/645b032c968c7c53b0d5e426