2023年11月29日发(作者：)

webpack5升级过程遇到的⼀些坑？

webpack5升级过程遇到的⼀些坑

版本相关信息

node: v14.15.0

npm: 6.14.8

mac: 10.14.6

webpack: 5.10.3

webpack-cli: 4.2.0

webpack-dev-server: 3.11.0

"webpack": "^5.10.3",

"webpack-cli": "^4.2.0",

"webpack-dev-server": "^3.11.0"

// .

s = {

presets: [

[

'@babel/preset-env',

{

targets: {

// webpack5.x

// 在webpack5.x中，odulesPlugin的功能已经内置

3. babel配置导致的⽂件引⼊错误，

@babel/runtime

在webpack5.x中，发现很多关于的⽂件引⼊错误，错误提⽰类似下⾯，通过锁定@babel/runtime包版本即可

@babel/runtime/helpers/esm

Module not found: Error: Can't resolve './superPropBase' in '/Users/xxx/node_modules/@babel/runtime/helpers/esm'

Did you mean ''?

BREAKING CHANGE: The request './superPropBase' failed to resolve only because it was resolved as fully specified

(probably because the origin is a '*.mjs' file or a '*.js' file where the contains '"type": "module"').

The extension in the request is mandatory for it to be fully specified.

Add the extension to the request

npm install @babel/runtime@7.12.0 -D

4.

webpack < 5 used to include polyfills for core modules by default

在运⾏过程中出现了很多这样的报错信息，是由于在webpack5中移除了nodejs核⼼模块的polyfill⾃动引⼊，所以需要⼿动引⼊，如果打包

过程中有使⽤到nodejs核⼼模块，webpack会提⽰进⾏相应配置

//

s = {

...

resolve: {

// /babel/babel/issues/8462

// /qq_39807732/article/details/110089893

// 如果确认需要node polyfill，设置ck安装对应的依赖

fallback: {

crypto: e('crypto-browserify'),

path: e('path-browserify'),

url: e('url'),

buffer: e('buffer/'),

util: e('util/'),

stream: e('stream-browserify/'),

vm: e('vm-browserify')

},

// 如果确认不需要node polyfill，设置设置为false

alias: {

crypto: false

}

}

}

5. DeprecationWarning: will be frozen in future, all modifications are deprecated. BREAKING CHANGE: No more

changes should happen to after sealing the Compilation.

Do changes to assets earlier, e. g. in sAssets.

Mak`e sure to select an appropriate stage from S_ASSETS_STAGE_*.

为这个包导致的⚠