How to import some file into entry file for webpack?

Question

I use the Node.js API for the webpack.config.ts:

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

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

The problem occurs when I try to import any file into the entry file - 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'
});

This throw an error:

"Module not found: Error: Can't resolve './swagger.config' in '/srv/git/ditsmod/ditsmod/packages/openapi/src/swagger-ui'"

But the swagger.config.ts file actually exists in the same directory with index.ts.

What am I doing wrong and how to import some file into entry file for webpack?

Answer 1

It seems like you are missing the resolve webpack option. You need to specify it so that webpack knows that you want to resolve .ts files:

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