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.

2. Install locally in the project folder:

npm install webpack --save-dev

When installed locally, you need to run webpack via npm script.

Running Webpack

Option 1: Using the webpack command

If webpack is installed globally, you can use the webpackcommand on the terminal to pack your application

webpack ./src/scripts/app.js ./dist/app.bundle.js

The above command invokes Webpack with below two arguments:

The first argument — ./src/scripts/app.js – is the entry point from where on-wards webpack will start building its module dependency tree and and start them bundling in a single output file.

And the second argument — ./dist/bundle.js – is the final output file that webpack will create for you after packing all your js code and other module dependencies.

Option 2: Using npm script

The webpack command can also be run via npm script. If webpack is installed locally you have to use this option.

I would be using this option throughout this tutorial.

In the package.json in your project’s root folder, add a script section and define a script – start like below:

Notice the scripts section above where we added a script named start that runs the same webpack command that we ran directly in option 1.

Now run the above script from the terminal:

npm start

This should invoke Webpack, which would start to bundle all your javascript code starting from app.js file and create a file app.bundle.js created in ‘dist’ folder (folder + filename as specified by the second parameter) under your project root directory.

Next we will see how to how to configure webpack options using webpack.config.js

[<<Prev: Project and folder setup] [Next: Webpack configuration file>>]