Webpack 無法正確解析我的別名

Question

我試圖讓我的應用程序有一個命名空間作為模塊工作，並使用這個命名空間導入我的組件並限制使用相對路徑。

雖然，即使我在這里遵循了別名的 webpack 文檔： http ://webpack.github.io/docs/configuration.html#resolve-alias，我也無法讓它工作。

這是我的解析對象的樣子：

resolve: {
  root: path.resolve(__dirname),
  alias: {
    myApp: './src',
  },
  extensions: ['', '.js', '.json', '.jsx']
}

path.resolve(__dirname)解析/Users/Alex/Workspace/MyAppName/ui/

我在文件/Users/Alex/Workspace/MyAppName/ui/src/components/Header/index.jsx導入我的文件：

import { myMethod } from 'myApp/utils/myUtils';

我在構建過程中收到以下錯誤：

ERROR in ./src/components/Header/index.jsx
Module not found: Error: Cannot resolve module 'myApp/utils/myUtils' in /Users/Alex/Workspace/MyAppName/ui/src/components/Header
 @ ./src/components/Header/index.jsx 33:19-56

我也嘗試過使用modulesDirectories但它也不起作用。

你知道有什么問題嗎？

Answer 1

將別名解析為絕對路徑應該可以解決問題：

resolve: {
  alias: {
    myApp: path.resolve(__dirname, 'src'),
  },
  extensions: ['', '.js', '.jsx']
}

用一個簡單的例子檢查這個webpack 解析別名要點。

限制相對路徑數量的另一種解決方案是將您的./src文件夾添加為 根目錄而不是別名：

resolve: {
  root: [path.resolve('./src')],
  extensions: ['', '.js', '.jsx']
}

然后你將能夠要求./src所有文件夾，就好像它們在模塊中一樣。 例如，假設您有以下目錄結構：

.
├── node_modules
├── src
│   ├── components
│   └── utils

您可以像這樣從components和utils導入：

import Header from 'components/Header';
import { myMethod } from 'utils/myUtils';

類似於為./src每個文件夾設置別名。

Answer 2

這對許多人來說可能很明顯，但是如果您像我一樣花了太多時間試圖弄清楚為什么從 Windows 或 Mac 遷移到 Linux 時它突然不起作用，然后檢查路徑中的大小寫...

我和項目中的其他人都在使用 Windows 或 Mac，但在家里我喜歡使用雙啟動 ubuntu。 在克隆我們的代碼並運行 webpack 時，我得到了很多Cannot resolve module...錯誤。 我花了更多的時間在 node、npm、webpack 或任何東西中搜索一些晦澀的錯誤，直到我注意到失敗模塊的路徑類似於@app/Shared/settings.js並且需要是require('@app/shared/settings') 。 Windows 不在乎所以一切都很好，直到我開始在 linux 上工作。 結果證明問題不在於 webpack、node 或其他任何東西，所以這可能就是為什么我沒有找到任何人暗示這可能是問題的原因。

希望這可以為某人節省一些時間。 或者也許我只是愚蠢，我不知道。

Answer 3

大多數情況下，這取決於您的項目文件夾結構。 如果您的 webpack 文件位於文件夾內，請確保相應地處理它

.
├── node_modules
├── src
│   ├── components
│   └── config/webpack.config.js

modules.exports = {
 resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      Components: path.resolve(__dirname, '../src/components/'),
    }
  },
  ...
  resolve: {
    ...
  }
}

此外，我們經常將文件夾命名為“source”，但在路徑中使用“src”。

該死！ 復制粘貼占用了我很多調試時間

希望這可以幫助因上述原因而面臨此類問題的人。

Answer 4

我得到了同樣的錯誤。 最后我發現問題是我寫了兩次resolve 。 第二個resolve覆蓋了前一個resolve 。 我的代碼是這樣的：

modules.exports = {
 resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      Components: path.resolve(__dirname, 'src/components/'),
    }
  },
  ...
  resolve: {
    ...
  }
}

更多幫助可以在Webpack Doc 中找到

Answer 5

我使用沒有下一個語法：

resolve: {
        alias: {
            Data:  __dirname + '/src/data'
        },
        extensions: ['.js', '.jsx', '.json']

    }

import points from 'Data/points.json';

Answer 6

就我而言，我想給mobx別名，這樣任何mobx導入mobx將始終返回相同的實例，無論導入調用是來自我的主應用程序，還是來自它使用的庫之一。

起初我有這個：

webpackConfig.resolve.alias = {
    mobx: path.resolve(root, "node_modules", "mobx"),
};

但是，這只會強制從我的應用程序自己的代碼中導入mobx以使用別名。

為了讓它也適用於庫的導入調用，我必須這樣做：

webpackConfig.resolve.alias = {
    mobx: path.resolve(root, "node_modules", "mobx"),
    "LIBRARY_X/node_modules/mobx": path.resolve(root, "node_modules", "mobx"),
};

這很奇怪，因為我很確定之前只有mobx別名用於兩種上下文，但現在顯然不行（Webpack v4.41.2）。

無論如何，以上是我解決的方法。 （在我的情況下，我需要它來防止使用兩個 mobx 實例，因為這會破壞事物，並且LIBRARY_X是使用 npm-link LIBRARY_X鏈接的，因此我無法刪除/統一輔助mobx文件夾本身）