Webpack resolve.fallback 不起作用。 未找到模塊：錯誤：無法解析 node_modules\aws4 中的“加密”

Question

我有一個通過 Vue CLI 創建的 nodejs 應用程序。 我需要使用 aws4 節點模塊來簽署我的請求。 但是，當我使用 aws4 模塊時，由於以下錯誤，應用程序無法提供服務：

ERROR in ./node_modules/aws4/aws4.js 4:13-30
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\henry\Repos\AWS4 TEST\aws4-test\node_modules\aws4'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
        - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "crypto": false }

我在 aws 模塊中的 3 個導入中收到此錯誤：crypto、url 和 querystring。

我閱讀了錯誤消息，看到 vue cli 使用的 webpack 的版本是 5+，因此不再包含 crypto 等核心模塊。

（我以前從未真正使用過 webpack，但說明看起來很簡單。）

我在我的項目 webpack.config.js 中創建了一個新文件並添加了以下內容：

module.exports = {
  resolve: {
    fallback: {
      crypto: require.resolve('crypto-browserify'),
    },
  },
};

然后我安裝了加密瀏覽器 package。

我仍然得到錯誤，它的差異為 0。

我在網上查看並嘗試了針對未找到加密問題的建議解決方案。 它們似乎都不起作用。 我試過了：

• 將此添加到 package.json

"browser": {
    "crypto": false
}

• 將加密 object 添加到 tsconfig.json 中的路徑 object

"compilerOptions": {
"baseUrl": "./",
"paths": {
   "crypto": ["node_modules/crypto-browerify"],
}

• 我嘗試使用節點模塊：node-polyfill-webpack-plugin。 這確實解決了 url 和查詢字符串的問題（導入模塊后）。 但是加密的問題仍然存在。

這是我的 package.json

{
  "name": "aws4-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "aws4": "^1.11.0",
    "axios": "^0.27.2",
    "core-js": "^3.8.3",
    "crypto-browserify": "^3.12.0",
    "crypto-js": "^4.1.1",
    "node-polyfill-webpack-plugin": "^2.0.0",
    "vue": "^2.6.14",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^9.1.2",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@types/aws4": "^1.11.2",
    "@types/jest": "^27.0.1",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-plugin-unit-jest": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-airbnb": "^6.0.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "@vue/test-utils": "^1.1.3",
    "@vue/vue2-jest": "^27.0.0-alpha.2",
    "babel-jest": "^27.0.6",
    "eslint": "^7.32.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-vue": "^8.0.3",
    "eslint-plugin-vuejs-accessibility": "^1.1.0",
    "jest": "^27.0.5",
    "ts-jest": "^27.0.4",
    "typescript": "~4.5.5",
    "vue-template-compiler": "^2.6.14"
  },
  "browser": {
    "crypto": false
  }
}

為了隔離這個問題，我通過 cli 創建了一個新的 vue 2 應用程序，然后添加了 aws4 和 axios 模塊。 node-polyfill-webpack-plugin 可以解決除加密錯誤之外的所有錯誤這一事實似乎很奇怪。 也許其他東西正在覆蓋它。

謝謝你的幫助。

Answer 1

webpack 配置不起作用的原因是因為我使用的是 vue-cli-service。 因此，要配置 webpack 配置，我需要編輯 vue.config.js 文件並使用 configureWebpack object。 此處的文檔： https://cli.vuejs.org/guide/webpack.html