compile typescript to js with webpack and keep directory structure

Question

I want webpack to compile my typescript node project into js but I want it to maintain the directory structure and not bundle into 1 file.

Is this possible?

My structure is:

src |_controllers |_home |_index.ts |_ services // etc.

And I want it to compile to:

dist |_controllers |_home |_index.ts |_ services // etc.

currently my config is like this:

{ name: 'api', target: 'node', externals: getExternals(), entry: isDevelopment ? [...entries] : entries, devtool: !isDevelopment && 'cheap-module-source-map', output: { path: paths.appBuild, filename: '[name].js', libraryTarget: 'commonjs2' }, plugins: [ new WriteFilePlugin(), new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }), isProduction && new webpack.optimize.ModuleConcatenationPlugin() ] }

Is it possible with webpack?

I can't use just tsc because I have a yarn workspaces monorepo and I might have a link reference like this:

import {something} from '@my/package';

@my/package does not exist in npm and only exists in the context of the monorepo, I can use node externals with webpack to include it in the bundle I don't think I can keep the folder structure this way.

Would the new typescript 3.0 project references solve this problem?

It's kinda weird since webpack is used for bundles... and you don't want a bundle, you just want to compile. See also: stackoverflow.com/questions/40096470/… — Andrei Tătar
– Andrei Tătar, Commented Aug 27, 2018 at 15:28
Can you give an example showing how the relative paths would fail with plain tsc? — Sly_cardinal
– Sly_cardinal, Commented Aug 27, 2018 at 15:28
Can you explain why you don't want it in a bundle? What do you believe to be the benefit of retaining a directory structure, rather than creating a bundle that is "chunked" based on what users need, might need, and will only need under certain conditions? — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Aug 27, 2018 at 16:02
use pure typescript compiler, it does what you are looking for. — PlayMa256
– PlayMa256, Commented Aug 27, 2018 at 16:19
I'm taking specifically about production, I don't want to upload the whole monorepo onto the server. — dagda1
– dagda1, Commented Aug 27, 2018 at 20:19

Cg Lee · Accepted Answer · 2022-12-22 15:11:24Z

Understood your concerns. Looks it's completely doable by transpile-webpack-plugin. You may setup it as below:

const TranspilePlugin = require('transpile-webpack-plugin'); module.exports = { // ... entry: './src/controllers/home/index.ts', output: { path: __dirname + '/dist', }, plugins: [new TranspilePlugin({ longestCommonDir: './src' })], };

The plugin works well with webpack resolve.alias and externals. All the files directly or indirectly imported by the entry will be collected and compiled into the output dir seperately without bundling but with keeping the directory structure and file names. Just have a try. 🙂

Collectives™ on Stack Overflow

compile typescript to js with webpack and keep directory structure

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related