Vue CLI 升级到 v5 以及 Webpack5 缓存配置

Vue2 项目为优化构建速度,将vue/cli-service从 v4 升级到 v5,并配置 webpack5 的持久化缓存。

Vue CLI

  1. 升级依赖项 @vue/cli-xxx 到 v5.x.x。如果是 Vue2.7 应该不低于 5.0.6(~5.0.6
  2. 升级 eslint 到最新版本(8+)

Typescript

  1. 升级 @typescript-eslint/eslint-plugin 到最新版本(5+)

Webpack 持久化缓存

如果之前使用了 hard-source-webpack-plugin,它只适用于 webpack v4,应该移除此依赖。

在 Vue 项目中开启 Webpack 持久化缓存:

1
2
3
4
5
6
7
8
// vue.config.js
module.exports = {
configureWebpack: {
cache: {
type: "filesystem",
},
}
}

更多的配置项可以参考:https://webpack.js.org/configuration/cache/

Webpack 资源模块

如果之前用到了 raw-loaderurl-loaderfile-loader,现在应该替换为使用资源模块(asset module)

参考

Total Views:
开始使用 Obsidian 管理个人知识库 斐讯 DC1 拆机后接入 home-assistant

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×