WittCode💻

Webpack Entry Points and Output

By

Learn what webpack entry points and output are, how to configure each, and what single, multi-main, and object webpack entry points are.

Table of Contents 📖

What are Entry Points?

Entry points tell webpack where to look when starting to build a bundle. In other words, they are the starting point for webpack to begin building dependency graphs. Webpack does this by using the entry point to figure out what modules and libraries the entry point depends on, then what its dependencies depend on, and so on.

Defining an Entry Point

There are different ways and syntaxes for defining an entry point. Nevertheless, all are specified with the entry key. Lets specify the entry point of this application to be ./src/index.js inside webpack.config.js.

module.exports = {
    entry: './src/index.js'
}

Here we are telling webpack to start the bundling process using that path ./src/index.js. This is also the default value for entry so if nothing was specified for entry then ./src/index.js would be used anyway. Now lets create a simple service called WittCodeService inside a folder called services.

mkdir services && cd services && touch WittCodeService.js

Inside this file export a simple class called WittCodeService.

export default class WittCodeService {
    constructor() {
        console.log('WittCode service instantiated!');
    }
    
    sayHello() {
        console.log('WittCode says hello!');
    }
}

Now inside our index.js file lets import it.

import WittCodeService from "./services/WittCodeService";
const wittcode = new WittCodeService();
wittcode.sayHello();

Now lets create a simple npm build script to run webpack inside package.json.

"build": "webpack --config webpack.config.js"

Now when we run this script with npm run build, webpack will use the configuration file and see that the entry point requires the WittCodeService and go from there when building the dependency graph. Run webpack with npm run build.

npm run build

What is webpack Output?

When we run webpack, we can see the bundle webpack creates is a file called main.js inside a folder called dist.

[object Object]

This is the default output location for webpack. Output tells webpack how/where to write the bundled files to. By default this is a folder called dist and, for JavaScript, a file called main.js.

Defining webpack Output

We can configure webpack's output with the output key.

module.exports = {
    entry: './src/index.js',
    output: {}
}

Lets change the default output name to bundle.js inside a folder called my-output. This can be done with the filename and path keys respectively.

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: `${__dirname}/my-output`
    }
}

This tells webpack to output the bundled JavaScript code into to a file called bundle.js in a folder called my-output. To demonstrate, run the npm run build command once more.

npm run build

Now observe the new output folder name and file name.

[object Object]

Multi-Main Entry

We can also give webpack multiple entry points or an array of file paths. To do so, we simply provide the entry key inside webpack.config.js an array of file path strings.

module.exports = {
    entry: ['./src/index.js', './src/index2.js']
}

This is called multi-main entry and is useful for working with dependent files whose graphed dependencies we want merged together. To demonstrate, create a file called WittCodeService2.js inside services.

touch WittCodeService2.js

Inside this file, export the constant wittCodeIsCool = true.

export const wittCodeIsCool = true;

Now create the file index2.js.

touch index2.js

Then import and log the wittCodeIsCool variable.

import {wittCodeIsCool} from "./services/WittCodeService2";
console.log(`WittCode is cool: ${wittCodeIsCool}`);

Now if we run webpack using the configuration file and run the bundled file, we will see both outputs.

npm run build && node ./my-output/bundle.js
WittCode service instantiated!
WittCode says hello!
WittCode is cool: true

Hence, both bundle chunks were merged into one.

Entry Point Object Syntax

Providing a string or array of strings to the entry key is a nice quick setup. However, we can have more configuration capabilities by providing an object to the entry key.

module.exports = {
    entry: {}
}

Each key provided to this object will be its own separate bundle. The name of each bundle will be the key value.

module.exports = {
    entry: {
        index: './src/index.js'
    }
}

Here, the name of the bundle will be index and the path to the entry point is ./src/index.js. Lets provide multiple bundle names to this object.

module.exports = {
    entry: {
        index: './src/index.js',
        index2: './src/index2.js'
    }
}

Now when we build the application with npm run build, we are given two output files named index.js and index2.js. However, unlike webpack input where there can be multiple entry points, webpack can only have one output. Therefore, as we have the output set to one file called bundle.js, we need to use substitution so that multiple files are created with their own name.

module.exports = {
    entry: {
        index: './src/index.js',
        index2: './src/index2.js'
    },
    output: {
        filename: '[name].js',
        path: `${__dirname}/my-output`
    }
}

The name substitution will be the filename, which here is the object keys index and index2.

[object Object]

We can further customize the entry point by supplying an object to the entry point as opposed to a string. One of these options is filename which specifies the name of each output file.

module.exports = {
    entry: {
        index: {
            import: './src/index.js',
            filename: 'cheese.js'
        },
        index2: './src/index2.js'
    }
}

Here we name the output file to be cheese.js for ./src/index.js. Note that this will override the filename provided in output. The import key specifies the modules to be loaded at startup. After running npm run build, we should now have a JavaScript file called cheese.js.

[object Object]

Specifically, the object entry configuration we supplied here tells webpack that we want 2 different dependency graphs or that we have two separate entry points. A use case for separate entry points could be multiple HTML files and we want to add cheese.js to one and index2.js to the other.