Pack multiple .ts files into single bundle.js file

Question

my code is like this:

Foo.ts:

export module Foo {

    export function load() { }
}

Bar.ts:

export module Bar {

    export function load() { }
}

webpack.config.js:

const path = require('path');

module.exports = {
    entry: {
        "FooBar": ['./Foo.ts', './Bar.ts']
    },
    mode: 'production',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    devtool: 'source-map',
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
        library: ['[name]'],
        libraryTarget: "window"
    }
};

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true
  },
  "exclude": [
    "node_modules"
  ]
}

The result however is, that only "Bar" becomes visible on the window object.

If I switch the two paths of the FooBar entry point, than only "Foo" becomes visible. If I put both modules Foo and Bar into Bar.ts, also having ./Bar.ts as the last path of the entry point, than both modules become visble on the window object. Some unintended overwriting or "the last one wins" behauvior is happening here. How to achieve that both modules become visible on the window object without putting them into the same .ts file?

I originally included glob in my webpack.config.js, to have it as dynamics as possible:

var glob = require('glob');
...
module.exports = {
    entry: {
        "FooBar": glob.sync('./*.ts*')
...

I would like to have all my .ts files become bundled into a single .js output file, but of course including all my modules.

dsosa · Accepted Answer · 2020-11-23 13:45:40Z

1

Your observation is almost right and the entry array in solution works as expected. As mentioned in their docs it is used to "inject multiple dependent files together and graph their dependencies into one 'chunk'". They just don't make very obvious that only the last item in the array is actually exported. See their last sentence here.

For the solution in which you're using glob to work you'd have to pass webpack an entry object with a property or key value pair per file.

answered Nov 23, 2020 at 13:45

dsosa

811 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Martype · Accepted Answer · 2020-11-24 10:30:55Z

thanks for pointing out, that I acually experience intended behauvior :D Occording to your feedback, I came up with this:

FooBar.ts

import { Foo as _Foo}  from "./Foo";
import { Bar as _Bar} from "./Bar";

export namespace FooBar {
    export const Foo = _Foo;
    export const Bar = _Bar;
}

webpack.config.js:

const path = require('path');

module.exports = {
    entry: {
        "FooBar": './FooBar.ts'
    },
    mode: 'production',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
        libraryTarget: "window"
    }
};

I am not 100% happy, because now I have to maintain FooBar.ts, but nevertheless the result is satisfying:

Collectives™ on Stack Overflow

Pack multiple .ts files into single bundle.js file

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related