Question: How to preserve the src/ directory structure when building to dist/ directory?

[bdshadow]

Could you please clarify how to achieve the same directory structure in the dist/ as in the src/. None of the responses from here https://stackoverflow.com/questions/52121725/maintain-src-folder-structure-when-building-to-dist-folder-with-typescript-3 helped.
Thanks in advance

[LeahPike]

Did you manage to solve this, none of the answers on the linked stack overflow helped?

I'd like it to maintain the structure as we'd potentially have a lot of files, you can see here only one script.ts is output.

[marijamitevska-rldatix]

You can control the structure of the /dist directory with the webpack.config.js file, because it's Webpack that bundles the different files into ES modules (ESM). You can have multiple entries in the module.exports, and for each of them have a different filename and output path, as you specify it yourself. You can use the GlobEntries if you want to have multiple files from the same directory bundled without specifying them one by one. You can use the CopyPlugin to simply copy files that don't need to be transformed. A webpack.config.js for this specific example should look something like this:

const path = require('path');
const GlobEntries = require('webpack-glob-entries');
const CopyPlugin = require('copy-webpack-plugin');

const defaults = {
	mode: 'production',
	node: {},
};

module.exports = [
	{
		...defaults,
		entry: { testScript: './tests/test-script.ts' }, // to bundle a single file from /tests as testScript.bundle.js
		output: {
			path: path.resolve(__dirname, 'dist'), // setting the output path for the file to be /dist, can be set to /dist/tests too
			libraryTarget: 'commonjs',
			filename: '[name].bundle.js',
		},
		target: 'node',
	},
	{
		...defaults,
		entry: GlobEntries('./tests/*.ts'), // this will grab every file in /tests and bundle it as [name].bundle.js
		output: {
			path: path.resolve(__dirname, 'dist/tests'), // setting the output path for the bundled files to /dist/tests
			libraryTarget: 'commonjs',
			filename: '[name].bundle.js',
		},
		module: { rules: [{ test: /\.js$/, use: 'babel-loader' }] },
		target: 'web',
		externals: /k6(\/.*)?/,
		plugins: [
			// Copy assets to the destination folder
			new CopyPlugin({
				patterns: [
					{ from: 'images', to: '../images', force: false }, // if you have an /images directory in the root directory, this will copy everything from that directory into /dist/images
					{ from: 'configs', to: '../configs', force: false }, // if you need another directory fully copied into /dist
				],
			}),
		],
	},
	{
		...defaults,
		entry: GlobEntries('./tests/accounts/*.ts'), // use the GlobEntries if you have multiple files in /tests/accounts you want bundled
		output: {
			path: path.resolve(__dirname, 'dist/tests/accounts'), // setting the output path for the files to /dist/tests/accounts
			libraryTarget: 'commonjs',
			filename: '[name].bundle.js',
		},
		module: { rules: [{ test: /\.js$/, use: 'babel-loader' }] },
		target: 'web',
		externals: /k6(\/.*)?/,
	},
	{
		...defaults,
		entry: GlobEntries('./tests/databases/*.ts'), // use the GlobEntries if you have multiple files in /tests/databases
		output: {
			path: path.resolve(__dirname, 'dist/tests/databases'), // setting the output path for the files to /dist/tests/databases
			libraryTarget: 'commonjs',
			filename: '[name].bundle.js',
		},
		module: { rules: [{ test: /\.js$/, use: 'babel-loader' }] },
		target: 'web',
		externals: /k6(\/.*)?/,
	},
];

[LeahPike]

Thank you