webpack5 降级指南- 从 node 14.6 迁移至 node 16 引发的兼容问题webpack5 降级指南- 从 node 14.6 迁移至 node 16 引发的兼容问题

在升级webpack 4至 webpack 5的过程中，我们遇到了node 版本从 14.6 升级至 node16 引发的问题，现将遇到的问题和解决方案记录如下：

问题一：node-sass安装失败

npm install node-sass

错误信息：

> node-sass@6.0.1 install /Users/username/Desktop/project/node_modules/node-sass
> node scripts/build.js

  node-sass@6.0.1 /Users/username/Desktop/project/node_modules/node-sass
  node scripts/build.js

gyp info it worked if it ends with ok
gyp info using node-gyp@9.0.0
gyp info using node@16.15.1 | linux | x64
gyp info find Python using Python version 3.10.4 found at "/opt/homebrew/opt/python@3.10/bin/python3"
gyp info find VS using VS2017 15.9.30.0 found at "/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain"
gyp info find node.h
gyp info find config.gypi
gyp info find config.gypi (node)
gyp info spawning /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/ruby-local -I /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/lib/ruby/site_ruby/2.6.0 -I /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/lib/ruby/site_ruby/2.6.0/x86_64-darwin20 -r ./node_modules/node-gyp/gyp/common.js -e 'process.exit 0' --depth=.. --no-parallel --generator-output=./build/config.ninja --gypfile=./binding.gyp --module=/Users/username/Desktop/project/node_modules/node-sass/src/binding/Release/node-sass.node --module_name=node_sass
gyp info spawn /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/ruby-local -I /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/lib/ruby/site_ruby/2.6.0 -I /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/lib/ruby/site_ruby/2.6.0/x86_64-darwin20 -r ./node_modules/node-gyp/gyp/common.js -e 'process.exit 0' --depth=.. --no-parallel --generator-output=./build/config.ninja --gypfile=./binding.gyp --module=/Users/username/Desktop/project/node_modules/node-sass/src/binding/Release/node-sass.node --module_name=node_sass >&5
gyp ERR! configure error 
gyp ERR! stack Error: Could not find module '/usr/local/lib/node_modules/node-gyp/gyp/common.js'
gyp ERR! stack     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:966:15)
gyp ERR! stack     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1071:27)
gyp ERR! stack     at Function.Module._load (internal/modules/cjs/loader.js:852:25)
gyp ERR! stack     at Function.Module.runMain (internal/modules/cjs/loader.js:1105:10)
gyp ERR! stack     at internal/main/run_main_module (internal/main/run_main_module.js:17:11)
gyp ERR! System Darwin 22.0.0
gyp ERR! command "/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/ruby-local" "-I" "/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/lib/ruby/site_ruby/2.6.0" "-I" "/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/lib/ruby/site_ruby/2.6.0/x86_64-darwin20" "-r" "./node_modules/node-gyp/gyp/common.js" "-e" "process.exit 0" "--depth" ".." "--no-parallel" "--generator-output" "./build/config.ninja" "--gypfile" "./binding.gyp" "--module" "/Users/username/Desktop/project/node_modules/node-sass/src/binding/Release/node-sass.node" "--module_name" "node_sass"
gyp ERR! cwd /Users/username/Desktop/project/node_modules/node-sass
gyp ERR! node -v v16.15.1
gyp ERR! node-gyp -v v9.0.0
gyp ERR! not ok 

解决方案：

使用较低版本的 node-sass，比如5.0.0。

npm install node-sass@5.0.0

问题二：node-sass编译失败

node-gyp rebuild

错误信息：

gyp ERR! configure error 
gyp ERR! stack Error: Could not find module '/usr/local/lib/node_modules/node-gyp/gyp/common.js'
gyp ERR! stack     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:966:15)
gyp ERR! stack     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1071:27)
gyp ERR! stack     at Function.Module._load (internal/modules/cjs/loader.js:852:25)
gyp ERR! stack     at Function.Module.runMain (internal/modules/cjs/loader.js:1105:10)
gyp ERR! stack     at internal/main/run_main_module (internal/main/run_main_module.js:17:11)
gyp ERR! System Darwin 22.0.0
gyp ERR! command "/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/ruby-local" "-I" "/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/lib/ruby/site_ruby/2.6.0" "-I" "/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/lib/ruby/site_ruby/2.6.0/x86_64-darwin20" "-r" "./node_modules/node-gyp/gyp/common.js" "-e" "process.exit 0" "--depth" ".." "--no-parallel" "--generator-output" "./build/config.ninja" "--gypfile" "./binding.gyp" "--module" "/Users/username/Desktop/project/node_modules/node-sass/src/binding/Release/node-sass.node" "--module_name" "node_sass"
gyp ERR! cwd /Users/username/Desktop/project/node_modules/node-sass
gyp ERR! node -v v16.15.1
gyp ERR! node-gyp -v v9.0.0
gyp ERR! not ok 

解决方案：

安装node-gyp@9.0.0。

npm install node-gyp@9.0.0

问题三：webpack编译失败

webpack --mode production

错误信息：

Module build failed (from ./node_modules/mini-css-extract-