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

最后

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

vue升级webpack5 | 八月更文挑战