Webpack不能正确parsing我的别名

我试图让我的应用程序的名称空间作为模块工作，并使用此名称空间导入我的组件，并限制使用相对path。

尽pipe我在这里跟着别名的webpack文档： http ://webpack.github.io/docs/configuration.html#resolve-alias我不能使它工作。

这是我的解决scheme对象的样子：

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'; 

在构build过程中出现以下错误：

 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

将别名parsing为绝对path应该可以做到这一点：

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

检查这个webpackparsing别名的要点 ，一个简单的例子。

限制相对path数量的另一个解决scheme是以root用户身份添加./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里有每个文件夹的别名./src 。