using html-webpack-plugin to generate index.html

Now that we got webpack configured to package and bundle our js code in a single file -app.bundle.js, we need an index.html for our web app with a script tag havingsrc='app.bundle.js'.

Installing Webpack

Two options:

1. Install Globally:

npm install -g webpack

When installed globally, webpack can be run using webpack command from the Command prompt/Terminal window.

‘watch’ Mode

We can have webpack running in a watch mode. With watch-mode enabled, webpack will keep ‘watch’-ing for any changes we make in our code and once we save the changes, it will rerun by itself to rebuild the package.

Setup and Installation

Basic folder structure setup

Lets start by creating an empty project folder and initialize it for npm using npm init command

1. On the terminal /command prompt, cd to the folder where you want to create your project…

Bundling module dependencies

To see how webpack bundles and packages our other dependent javascript modules in the final app.bundle.js, lets create another js file and import it in our app.js

1. Under our ./src/scripts folder, create a new file named my-helper-module.js with below…

Introduction

What is Webpack?

Webpack, with the help of its loaders and plugins, is a Module Bundler +…