CODEWITHSUNDEEP
angularwebpack
user3334871
user3334871

Reputation: 1361

Can your webpack.config file serve multiple entry points?

Due to learning Angular 2 while developing the project, I did not incorporate routing as well as I should have. I have a main.js file that bootstraps one component, and another main2.js file that bootstraps a second component (I know now that I should have routed them from one page, but we are very far into the project that it will cause a backup ((will do if necessary however)). I am trying to use webpack to bundle the code for 'loadability' (sp?).

Here is my webpack.config.js file:

var path = require( 'path' );
var webpack = require( 'webpack' );

module.exports = {
    entry: "./main",
    output: {
        path: __dirname,
        filename: "./dist/bundle.js"
    },
    resolve: {
        extensions: ['.js', '.ts']
    },
    module: {
        loaders: [{
            test: /\.ts/, loaders: ['ts-loader'], exclude: /node_modules/
        }]
    }
};

Would it be possible to define two entry points like so:

var path = require( 'path' );
var webpack = require( 'webpack' );

module.exports = {
    entry: "./main",
    output: {
        path: __dirname,
        filename: "./dist/bundle.js"
    },
    resolve: {
        extensions: ['.js', '.ts']
    },
    module: {
        loaders: [{
            test: /\.ts/, loaders: ['ts-loader'], exclude: /node_modules/
        }]
    }
};

module.exports = {
    entry: "./main2",
    output: {
        path: __dirname,
        filename: "./dist/bundle2.js"
    },
    resolve: {
        extensions: ['.js', '.ts']
    },
    module: {
        loaders: [{
            test: /\.ts/, loaders: ['ts-loader'], exclude: /node_modules/
        }]
    }
};

OR am I better off going back and re-structuring my project to use routing and have one entry point serve me components?

Upvotes: 4

Views: 3071

Answers (1)

The.Bear
The.Bear

Reputation: 5855

Short answer, Yes.

You can have multiple entry points and will generate multiple outputs if you want.
The entry property could be a string, an object or an array.

Example:

var path = require( 'path' );
var webpack = require( 'webpack' );

module.exports = {
    entry: {
        "main": "./main.ts",
        "main2": "./main2.ts",
    }
    output: {
        path: path.join(__dirname, './dist'),
        filename: "[name].js"
    },
    // Rest of your config ...
};

With [name] you will get the name of the entry point, 'main' and 'main2' in your case, so you final bundles will be called 'main.js' and 'main2.js'

Check this docs (is for webpack 1, but in webpack 2/3 is almost the same).

Upvotes: 6

Related Questions