#

3. LAND ON THE WEBPACK CONFIG FILE

#

First thing first -

Webpack simply needs to have it’s 4 core things to execute properly.

1. Entry

2. Output

3. Loaders

4. Plugins

We’re going to define entry and output for webpack in this section and watch our first bundled output.

3.1. Exporting our config object

Since, we’re using node.js and webpack uses the modular pattern, we first need to export the configuration object from our webpack.config.js

module.exports = {

// configurations here

}

OR, this approach:

const config = {

// configurations here

};

module.exports = config;

3.2. Define entry point(s)

Single entry point:

The app starts executing from this point if your app is SPA(Single Page Application). We’ll define a path relative to our project root

const config = {

entry: './src/app.js',

};

Multiple entry points:

If your app has multiple entry points (like: multi-page application), then, you have to define your entry points inside entry object with identical names. Multiple entry points are called chunks and the properties (individual entry point) of this entry object are called entryChunkName . So, let’s create it:

const config = {

entry: {

app: './src/app.js',

vendors: './src/vendors.js'

}

}

Look carefully, our entry property is not a string anymore, it’s now a pure javascript object with different entries being the properties of it.

This is so helpful when we want to separate our app entry and vendor (like: jQuery/lodash) entry into different bundles.

3.3. Define output point

Webpack needs to know where to write the compiled files in the disk. That’s why we need to define output point for webpack.

NOTE: while there can be multiple entry points, only ONE output configuration is specified.

We define our output point as an object . This object must include these two following things at least:

1. filename (to use our output files)

2. path (an absolute path to preferred output directory)

We can define path of the output point manually. But that won’t be a wise choice, since our project root’s name and location may change later. Besides, you or your collaborator may clone your projects on different pc in which case the custom absolute path won’t work there too.

So, to solve this, we use node.js path module which gives us the absolute path for our project root in a more convenient way.

To use node.js path module we need to import it in our config file and then use it in our output object

const config = {

output: {

filename: 'bundle.js',

// Output path using nodeJs path module

path: path.resolve(__dirname, 'dist')

}

};

You can use path.join or path.resolve , though both working kinda same. To not to make this article bigger and distracting, I’m going to skip the process of how node.js path.join and path.resolve works, but giving you the resources:

path.resolve resource : here

path.join resource : here

NOTE: when creating multiple bundles for multiple entry points, you should use one of the following substitutions to give each bundle a unique name

Using entry name:

filename: "[name].bundle.js"

Using hashes based on each chunks’ content:

filename: "[chunkhash].bundle.js"

For more naming options: https://webpack.js.org/configuration/output/#output-filename

Besides, you may want to give a relative path to your output file in the output.filename

3.4. Define Context

Context is the base directory, an absolute path, for resolving entry points and loaders from configuration. By default the current directory is used, but it’s recommended to pass a value in your configuration. This makes your configuration independent from CWD (current working directory).

const config = {

context: path.resolve(__dirname, "src")

};

Until now, our basic setup:

Webpack config file basic setup — 1

Now, fire this command into your terminal to watch your first bundle:

> npm run build

For production ready bundle:

> npm run build:prod

For developing with watch mode ON:

> npm run watch

Voila! 😎 We’ve just landed on the ground of awesomeness!

Now, we’re going to add some loaders and plugins to make our actual configuration object after finishing two more setup. We’re going to use some automation that is provided by webpack.