vue升级webpack5

八月更文第二弹， 开始啦！ 🍦

webpack5已经发布快一年了，其中有很多新功能让人跃跃欲试，身为技术热爱者的我们怎么能够停滞不前呢 🐶，今天就来学习一下用webpack5搭建项目和新特性了解。

升级vue-cli

在vue项目内升级webpack5是很便利的，直接升级本地vue-cli到5.0.0就可以使用了，但是注意这里是beta版本，线上环境请谨慎使用。

• 升级vue-cli 📃 First, install the latest Vue CLI globally:

npm install -g @vue/cli@next# 
OR
yarn global add @vue/cli@next

• 升级所有插件 Upgrade All Plugins at Once

vue upgrade --next

• 检查 升级完成后查看package.json,如图所示即代表升级成功。示例项目为新建项目，不存在npm包不兼容情况，如果是旧项目升级，会遇到许多兼容问题，请移步vue升级webpack5官网查看。

webpack5新特性

具webpack官方介绍，v5版本主要有以下新增

过时功能移除

• 首先是去掉了在 Webpack4 里面已经 Warming 的功能。

• 其次是 IgnorePlugin 和 BannerPlugin 现在必须传入一个参数，参数可以是 Object、String或者Function。require.include 语法被废弃，使用时会有 Warming。当然这个行为可以通过 Rule.parser.requireInclude 来把这个语法改成 allowed, deprecated 或者 disabled。

• 还有就是去掉自动 Node.js Polyfills 。一开始的化 Webpack 的主要目的是让 Node.js 的模块能够在浏览器运行，但随着模块格局的改变，越来越多的模块只用于浏览器，这个时候再自动 Polyfills 一些 Node 模块（例如 crypto）无疑会增加打包体积，在 Webpack5 之后去掉了这个自动行为。

长期缓存

webpack5的长期缓存要处理什么问题呢，首先在webpack4中我们可以注意到这样的现象：

• 代码热更新速度快
• 代码运行run速度慢
• 代码打包build速度慢 这里的原因是webpack4的缓存只是在内存中的，当webpack程序重新建立时，内存就会丢失，从而造成了运行和打包慢的情况。
  说到这里我想大家对webpack5的长期缓存已经猜到了，就是要解决webpack程序运行缓存丢失，从而造成运行打包慢的问题。
  目前webpack5提供了一套持久化抽象，并提供了几个实现:
• IdleFileCachePlugin：持久化到本地磁盘
• MemoryCachePlugin：持久化到内存 根据Webpack运行环境的不同，在dev开发时依旧使用MemoryCachePlugin，而在build时使用IdleFileCachePlugin。

Webpack5直接从内部核心代码的层面，统一了持久化缓存的方案，有效降低了缓存配置的复杂性。除此之外，由于所有被webpack处理的模块都会被缓存，我们npm run start/build的二次编译速度会远超cache-loader，同时dll也可以退出历史舞台了。

Webpack4时之所以要有dll，是因为cache-loader并不能覆盖所有模块，只能对个别被loader处理的模块进行缓存。而那些通用的库是没法被cache-loader处理的，所以只能通过dll的方式来预编译。

实际上，Webpack5的内置缓存方案无论从性能上还是安全性上都要好于cache-loader：

• 性能上：由于所以被webpack处理的模块都会被缓存，缓存的覆盖率要高的多
• 安全上：由于cache-loader使用了基于mtime的缓存验证机制，导致在CI环境中缓存经常会失效，但是Webpack5改用了基于文件内容etag的缓存验证机制，解决了这个问题。

Module Federation

这个被翻译为模块联邦，听起来有点奇怪。但是它可能时webpack5中最引人瞩目的一个特性， 这个特性可谓时真正实现了不同应用之间的模块共享。

例如我们有一个应用a,一个应用b,我们想让b应用使用a应用中的一个组件。这时候可能脑子的第一想法时cv大法搞一个，但是这样后期的维护就会变得很艰难，组件更新的实时同步根本无法确保。 这时候模块联邦就帮我们解决了这样一个问题。 具体的使用介绍将会在下一篇文章《webpack5-模块联邦实现微前端》中详细讲解。希望大家及时关注哦~

The Better TreeShaking

树摇的优化主要有两点：

• 嵌套 Webpack现在会去追踪 export 的链路，对于嵌套场景有更好的优化。 在下面的示例代码中，我们最终的使用参数只有webpack_five而webpack_four是不会出现在最终的打包程序中的。

// inner.js`
export const webpack_four = 4
export const webpack_five = 5

// module.js
import * as inner from  "./inner"
export { inner }

// user.js`
import * as module from  "./module"
console.log(module.inner.webpack_five)

• 内部模块 Webpack 4 不会去分析导入和导出模块之间的依赖关系，Webpack5 里面会通过 optimization.innerGraph记录依赖关系。 在下面的示例代码中，只有webpack_cookie方法使用了 egg。最终可以实现标记更多没有使用的导出项。

import { egg } from  "./egg"

function eatingEgg() {
  return egg
}

export  function webpack_cookie() {
  return  eatingEgg()
}

其他特性

• Named chunk IDs （命名块 id）
• Compilers （编译器）
• Config changes （配置更改）
• 其他
• webpack5

最后

本文到此结束，希望对你有帮助 😉