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

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

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