时间戳

首页 > 解决方案 > tsconfig 路径和 webpack 别名 - 找不到模块问题

reactjs - tsconfig 路径和 webpack 别名 - 找不到模块问题

问题描述


myCustom 和 ToDo 都是 react 应用程序，并且希望将 MyCustom 作为 ToDo 应用程序中的模块导入。
所以以下是我的试用/文件夹结构：

[api]
|
[client]
|- [MyCustom]
|- [ToDo]
|  |- [src] (in src, will use - import {} from 'myCustom')
|  |- tsconfig.json (added "paths": { "myCustom": ["../myCustom/src"] })
|  |- package.json (added dependency - "myCustom": "1.0.0")

在 ToDo 应用程序中，当我尝试时npm install，它说不myCustom在 npm 注册表中。
你能指出这里有什么问题吗？

_____________________________

在 TODO webpack.config.js 文件中，我已添加

resolve: {
   modules: ['../MyCustom/src']
},
resolveLoader: {
   modules: ['../MyCustom/src', 'myCustom']
}

并构建失败并出现以下错误：
找不到模块：错误：无法解析“源映射加载器”。


我是否使用了错误的装载机？

标签： reactjswebpacktsconfig

解决方案

resolve 是 webpack 中的一个主要主题。

  1. 请阅读如何解析别名并且不要在 webpack 中使用 '../'
  2. 然后定义可以找到模块的位置
  3. 定义可以找到加载器的位置
  
    // https://github.com/unic/darvin-webpack-boilerplate/blob/master/webpack.config.js
    const webpackConfigProd ={
        resolve: {
          modules: ['node_modules', '@yourAlias/yourCustomDir']
        },
        resolveLoader: {
          modules: ['node_modules', '@yourAlias/loaderDir']
        }
    };

推荐阅读