Webpack/ts-loader 无法解析带有 .js 扩展名的导入

Question

我的目录结构如下：

projectRoot
├── project-server
│   ├── src
│   └── pom.xml
├── project-ui
│   ├── tsconfig.json
│   └── src
│       └── file.ts.  (imports ./file.js)

我的问题是 project-server 使用转译后的 js 文件，因此需要 .js 扩展名来解析文件。我正在使用 webpack-dev-server 进行开发并使用 ts-loader 但我收到的错误是：

Module not found: Error: Can't resolve './file.js' in 
'/projectRoot/project-ui/src'

以下是我的 webpack.config.js :

module.exports = {
  entry: './project-ui/src/file1.ts',
  mode: "development",
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      },
      ... other rules
    ]
  },
  resolve: {
    extensions: ['.js', '.ts'],
  }

我的 tsconfig.json 具有特定于 project-server 需要 js 文件的位置的配置。即， "outDir": "../project-server/src/main/resources/static"

所以我不确定如何配置 Webpack/ts-loader 以正确解析导入语句。

Answer 1

我目前正在处理基本相同的问题。恐怕我没有一个很好的答案给你，虽然我发现了 2017 年的一个讨论说 ts-loader 不支持这种行为：

https://github.com/microsoft/TypeScript/issues/16577#issuecomment-343649391

如果从那时起添加了支持，我还没有找到任何详细信息。

尽管在 webpack.config.js 的 resolve.alias 部分中设置了别名，但我取得了一些成功，因此 Webpack 将使用 .js 的某些文件的相对路径解析为 .ts等价物。例如：

alias: {
    './file-processing.js': './file-processing.ts',
},

但这是一个非常笨重的解决方案，根本无法扩展。

Answer 2

ts-loader 本身不支持具有 .js 扩展名的导入，因此此项目 https://github.com/softwareventures/resolve-typescript-plugin 提供了完成此工作所需的额外步骤。

Webpack/ts-loader 无法解析带有 .js 扩展名的导入

Webpack/ts-loader import with .js extension not resolving

javascript

typescript

webpack

ts-loader