Webpack configuration file

In the last section, we ran the webpack command (on terminal or via npm script) with two arguments:

1. the entry point of our application for webpack to start bundling modules from and

2. the name of the final output folder + file name.

Webpack comes with lot many other features to configure the module bundling and task running for our project. So, instead of providing all these configuration options as command-line arguments, Webpack allows us to specify all these options in a configuration file.

The configuration file is basically a common.js module exporting a configuration object.

1. Add a folder named ‘webpack’ in the project’s root directory and under this folder, add a file — webpack.config.js.

2. In this config file, we will start with configuring the same two options that we earlier specified when running the webpack command from command line -i.e the entry point and the output file path and name.

Add the below code to webpack.config.js

3. Run npm start command

$ npm start

4. This should create the app.bundle.js file under the ‘./dist’ folder:

(click on image to see in expanded popover view)

Next, we will see how to use webpack’s html-webpack plugin to generate a custom index.html file for our application.

[ <Prev: Installing webpack ] [ Next: html-webpack plugin > ]