Print

记录将项目中webpack4升级至webpack5一次成功尝试

作者： 文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/196942.html

目录文章目录
  1. webpack4 跟 webpack5 构建效率对比
  2. 踩坑指南
  3. 总结

最近很多小伙伴们都在问vite都出来了，是否还有必要将webpack升级到5？那么，vite是不是很快就要取代webpack了呢？

针对这个问题，我个人观点是：适合你项目的构建工具就是最好的。当前前端的构建工具有很多种，从早期的gulp、再到ES时代的rollup、webpack等；每种构建工具都有自己的不同特性，主要是看公司以及你的团队所需，不一定有了新工具出来我们就一定要立马去学习，立马抛弃生产环境正在跑的工具，经历过大浪的洗礼，最终活下来的才是真正值得我们学习的。

而距离webpack5的发布已经有大半年了，相信有很多小伙伴们已经在自己的项目中升级了webpack5，也体验到了webpack5打包构建时带来的飞一般的感觉。

记录将项目中webpack4升级至webpack5一次成功尝试 1

经过排查发现，我们需要在url-loader配置中添加esModule: false才可以把require引入的图片正常的编译。

webpack5

module.exports = {
    {
    test: /.(jpg|jpeg|png|gif)$/,
    use: [
        {
            loader: "url-loader",
            options: {
                // 新增一行这个配置
                esModule: false,
                limit: 8192,
                outputPath: "img/",
                name: "[name]-[chunkhash:6].[ext]"
            }
        }
    ]
}
}

总结

当然，上述仅仅是我摘取几个比较有代表性的打包报错，没有把所有的报错一一给大家罗列出来。具体的细节还需要小伙伴们自己动手去折腾，这样才能完整的体验到整个升级带来的快（痛）乐（苦）；尤其是你在历经各种各样奇奇怪怪的报错，然后又一个个的将其修复的时候，内心还是会有一些成就感的，最重要的是webpack5在构建的效率上确实相比webpack4有了非常大幅的提升。

所以，webpack5中除了在构建上利用其强大的持久化缓存，将构建的效率有非常大的提升之外，还有一些非常令人兴奋的新特性

尤其是 Module Federation，有点类似于云组件的概念，跟微前端的理念非常类似。它使 JavaScript 应用得以从另一个 JavaScript 应用中动态地加载代码 —— 同时共享依赖。相当于 webpack 提供了线上 runtime 的环境，多个应用利用 CDN 共享组件或应用，不需要本地安装 npm 包再构建了。

后续有机会我也会在单页的项目中尝试使用Module Federation。

更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/