Webpack解析扩展“找不到模块”

我有一个相当复杂的项目，既有express和Angular同居。为了这张贴的目的，我只是担心明确的一面。Webpack解析扩展“找不到模块”

我的服务器端自定义模块均采用进口这样的：

import { PayPal } from "@helpers/paypal"; 
import { Database } from "@models/database";

使用一个的baseUrl和路径在tsconfig.json

"baseUrl": ".", 
    "paths": { 
     "@helpers/*": [ 
     "helpers/*" 
     ], 
     "@models/*": [ 
     "models/*" 
     ] 
    }

这一切工作可爱的，但是没有按的WebPack我不喜欢它：

Error: Cannot find module '@helpers/paypal'

Typescript（tsc）运行得很好，所以问题出现在webpack中。有大量的文档暗示我要补充一个别名，像这样webpack.config：

module.exports = { 
    "resolve": { 
    "extensions": [ 
     ".ts", 
     ".js", 
     ".json" 
    ], 
    alias: { 
     "@helpers/*": path.resolve(path.join(__dirname, 'server', 'helpers')), 
    }, 
    "modules": [ 
     "./node_modules" 
    ], 
    ...etc

我已经尝试了多种组合的路径，但没有一个似乎工作。

编辑添加的上下文中的文件夹结构图像

佣工文件夹的路径是： /服务器/佣工

是在打字稿工作我的import语句是： 进口{@ helpers/paypal“中的{PayPal};

来源

2017-09-15 Matt Knight

Webpack别名不使用球体，但每当别名键匹配时，该特定匹配将被替换为您分配给它的值。因为server/helpers是一个目录，这意味着你只需要为它创建一个别名@helpers，并且只要你导入类似@helpers/paypal的东西，它就会扩展到/absolute/path/to/server/helpers/paypal。

alias: { 
    "@helpers": path.resolve(__dirname, "server", "helpers") 
}

这是一个非常普遍的使用别名和resolve.alias文档解释了。从resolve.alias表

摘录：

| alias:    | import "xyz"  | import "xyz/file.js"   | 
|-----------------------|--------------------|-------------------------------| 
| { xyz: "/some/dir" } | /some/dir/index.js | /some/dir/file.js    | 
| { xyz$: "/some/dir" } | /some/dir/index.js | /abc/node_modules/xyz/file.js | 
| { xyz: "./dir" }  | /abc/dir/index.js | /abc/dir/file.js    |

来源

2017-09-15 08:51:41

我感谢你的帮助。不幸的是，我仍然没有得到解决该模块的webpack。我尝试了几种排列方式（包括您提供的排列方式）并查阅了resolve.alias文档。我相信这是简单的，但我忽略它。 –

您的webpack配置是否在您的项目的根目录中？ ['__dirname']（https://nodejs.org/api/modules.html#modules_dirname）是当前执行文件（wepack配置）的绝对路径。如果这不是问题，请发布'webpack --display-error-details'的输出。 –

是的，webpack.config位于项目的根目录下。有趣的是，webpack --display-error-details的输出是干净的。所以，现在让我想到我在运行我的服务器版本时看到的错误与其他内容有关。我会将这个答案标记为正确的，因为你帮了我很多并开始一个新的问题。 –

Webpack解析扩展“找不到模块”

回答

相关问题