Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

123
Views
Compiling a typescript project with webpack

I have a question for you - how is it possible to implement multi-file compilation while preserving the tree of folders and documents, while not writing each file into entry in this way

entry: {
    index:'./src/index.ts',
    'bot/main':'./src/bot/main.ts'
  }

But at the same time, the files had their names and their position, as before compilation in js, only instead of the src folder, they were in the dist folder?

My current config webpack.config.js

const path = require('path')
const nodeExternals = require('webpack-node-externals')
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')

module.exports = {
  context: __dirname,
  entry: {
    index:'./src/index.ts',
    'bot/main':'./src/bot/main.ts'
  },
  externals: [nodeExternals()],
  module: {
    rules: [
      {
        exclude: /node_modules/,
        test: /.ts$/,
        use: {
          loader: 'ts-loader'
        }
      }
    ]
  },
  node: {
    __dirname: false
  },
  resolve: {
    extensions: ['.ts', '.js'],
    plugins: [
      new TsconfigPathsPlugin({
        baseUrl: './src'
      })
    ]
  },
  output: {
    filename: '[name]js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist/'
  },
  target: 'node'
}

And when building in production mode, all this was compiled into one file, taking into account all URLs, imports, etc.

Is it even possible?

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Webpack itself won't do that for you. You will need to write litter helper function to achieve this. The basic idea is to crawl the directory, find all the files and then provide them to Webpack:

const path = require('path');
const glob = require('glob');


const extension = 'ts';

// Recursively find all the `.ts` files inside src folder.
const matchedFiles = glob.sync(`./src/**/*.${extension}`, {
  nodir: true
});

const entry = {};

matchedFiles.forEach((file) => {

  const SRC_FOLDER = path.join(__dirname, 'src');
  const ABS_PATH = path.join(__dirname, file);

  // Generates relative file paths like `src/test/file.ts`
  const relativeFile = path.relative(SRC_FOLDER, ABS_PATH);
  
  // fileKey is relative filename without extension.
  // E.g. `src/test/file.ts` becomes `src/test/file`
  const fileKey = path.join(path.dirname(relativeFile), path.basename(relativeFile, extension));

  entry[fileKey] = relativeFile;
});


module.exports = {
  context: __dirname,

  // Use the entry object generated above.
  entry,
  // ... rest of the configuration
};
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!