【项目实战】记录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

Upgradedeslint-plugin-vueto9.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.
• Runnpm ifrom 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

• 本节完 ～