【项目实战】记录Webpack 4 升级到 5

为啥要升级 ？

构建速度提升（大概4倍 ） + 长效缓存

ps：着实是 文章封面 不好找 ～

思想

0、先清理 不使用的依赖
1、先自动升级 依赖版本
2、build 错误解决 
3、新版本 测试一遍 不报错
4、done !

开始

• 先清理依赖

sudo npm  install  -g  npm-check
npm-check

• 使用 npm-check-updates 升级 依赖 对新手还行

sudo npm install -g npm-check-updates
npm-check-updates
ncu -u  # 检查 package.json 
npm install # 安装依赖

• 当前 package.json 和 之前对比

npm run build 后解决问题

1

解决

• 删除 .babelrc

• 装 eslint npm install eslint

2

解决

• src index.js 更改为 main.js

3

解决

安装 "eslint-plugin-vue": "^4.5.0",

4

解决

npm install eslint-plugin-vue -u

Upgraded eslint-plugin-vue to 9.1.1

5

解决

Solution:

The error occurred because the version you are using is deprecated and the updated version does not support ES6 modules. So the program needs to be updated to the latest babel-eslint-parser.

To update to latest babel-eslint-parser you have to follow the below steps:

• In package.json, update the line "babel-eslint": "^10.0.2", to "@babel/eslint-parser": "^7.5.4",. This works with the code above but it may be better to use the latest version.
• Run npm i from a terminal in the folder
• In .eslintrc, update the parser line "parser": "babel-eslint", to "parser": "@babel/eslint-parser",
• In .eslintrc, add "requireConfigFile": false, to the parserOptions section (underneath "ecmaVersion": 8,) (I needed this or babel was looking for config files I don't have)
• Run the command to lint a file

6

解决

• 暂时 忽略 掉 这些 先跑通

7 npm run build

8

解决 不使用 这个 需要 用 process.env.xxxx

9

• 这个是 因为 webpack 5 需要更改

参考这个 viglucci.io/how-to-poly…

• 关键

  plugins: [
      loadHtmlWebpackExternalsPlugin(),
      new webpack.ProvidePlugin({
        Buffer: ['buffer', 'Buffer'],
      }),
    ]

10

可参考 这个 www.jiangruitao.com/webpack/cop…

11 跑起来

测试 一遍功能

• 尤其是 接口 api 调用部分 env.js / httpEnv.js

• 本节完 ～