如何将一些文件导入到WebPack的入口文件中？

Question

我将node.js API用于webpack.config.ts:

import { resolve } from 'path';
import { Configuration } from 'webpack';

export const config: Configuration = {
  // ...
  context: resolve(__dirname),
  entry: {
    swaggerUi: './index.ts'
  },
  // ...
};

当我尝试将任何文件导入到条目文件-index.ts中时，就会出现此问题：

import SwaggerUI from 'swagger-ui';
import 'swagger-ui/dist/swagger-ui.css';
import { urlConfig } from './swagger.config';

const ui = SwaggerUI({
  url: urlConfig.url,
  dom_id: '#swagger',
});

ui.initOAuth({
  appName: 'Swagger UI Webpack Demo',
  clientId: 'implicit'
});

这将引发一个错误：

“未找到模块：错误：无法解析”/srv/git/ditsmod/ditsmod/packages/openapi/src/swagger-ui“中的”./swagger.config“”

但是swagger.config.ts文件实际上与index.ts存在于同一个目录中。

我做错了什么，如何导入一些文件到入口文件为webpack？

Answer 1

您似乎缺少resolvewebpack选项。您需要指定它，以便webpack知道您要解析.ts文件：

  resolve: {
    extensions: [".ts", ".js", ".tsx"], // remove .tsx if you don't need the jsx syntax
  },