如何将一些文件导入到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'
});

这引发了一个错误：

"找不到模块：错误：无法解析"/swagger.config'in'/srv/git/ditsmod/ditsmod/packages/openapi/src/swagger-ui'；

但是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
},