webpack 安装兼容问题

一、前言

在开发华为快应用的时候，运行官方demo时候出现了一个错误，这里将过程中遇到的问题的解决方式进行记录

二、错误信息

在开启npm模式后，该文件是通过华为快应用编辑器自动生成的，npm的依赖如下:
package.json

{
  "name": "com.huawei.example",
  "version": "1.0.30",
  "description": "",
  "scripts": {
    "fa-build": "node node_modules/webpack/bin/webpack.js --progress --config ./node_modules/fa-toolkit/webpack.config.js",
    "fa-watch": "node node_modules/webpack/bin/webpack.js --watch --progress --config ./node_modules/fa-toolkit/webpack.config.js",
    "fa-release": "node ./node_modules/cross-env/src/bin/cross-env.js uglifyjs=true sign=release node_modules/webpack/bin/webpack.js --progress --config ./node_modules/fa-toolkit/webpack.config.js"
  },
  "devDependencies": {
    "fa-toolkit": "file:fa-toolkit-12.2.1-Stable.300.tgz",
    "cross-env": "^7.0.2"
  }
}

然后进行编译，错误如下:

ERROR: Module not found: Error: Can't resolve 'sass-loader' in '/Users/c/Documents/quickapp/workSpace/huawei-quick/com.huawei.example/src/Component/basic/a'

三、解决过程

这里会给出提示缺少sass-loader，然后进行安装(这里注意本文的环境为webpack5)。
通过npm view sass-loader versions可知最新版本，更新后的依赖文件文件如下:

{
  "name": "com.huawei.example",
  "version": "1.0.30",
  "description": "",
  "scripts": {
    "fa-build": "node node_modules/webpack/bin/webpack.js --progress --config ./node_modules/fa-toolkit/webpack.config.js",
    "fa-watch": "node node_modules/webpack/bin/webpack.js --watch --progress --config ./node_modules/fa-toolkit/webpack.config.js",
    "fa-release": "node ./node_modules/cross-env/src/bin/cross-env.js uglifyjs=true sign=release node_modules/webpack/bin/webpack.js --progress --config ./node_modules/fa-toolkit/webpack.config.js"
  },
  "devDependencies": {
    "fa-toolkit": "file:fa-toolkit-12.2.1-Stable.300.tgz",
    "cross-env": "^7.0.2",
    "sass-loader": "^13.0.2",
    "node-sass": "^7.0.1",
    "dart-sass": "^1.25.0"
  }
}

然后清除缓存，重新下载依赖进行编译。正常来说就可以了。关于为什么缺少sass-loader需要添加以下三个，可以参考webpack5的官方文档

"sass-loader": "^13.0.2",
    "node-sass": "^7.0.1",
    "dart-sass": "^1.25.0"

对于百度上添加sass-loader。有的会说添加sass-loader、node-sass。不会说要添加dart-sass。这样的话部分环境下可能无法编译通过，出现以下错误:

TypeError: The ‘compilation‘ argument must be an instance of Compilation

四、参考链接

1. webpack5的官方文档
2. node-js版本及兼容建议
3. TypeError: The ‘compilation‘ argument must be an instance of Compilation