[wp|1] Basic Idea of Webpack

____________________________________________

Download code here to follow this lesson.
Navigation: [ < Previous ][ Table of Content ][ Next > ]

The basic idea of webpack is to take an input file from a specified location, process it, then generate a named output at another location.

Let’s see this working in action.

Create an input file in a folder called src :

~/Desktop/setup-webpack2/src/main.js

Create a folder called public/scripts/ as our output location:

~/Desktop/setup-webpack2/public/scripts/

Now that we have our input file and an output location, let’s move on to install webpack:

$ npm i -D --save-exact webpack@2.2

We also need a configuration file:

~/Desktop/setup-webpack2/webpack.config.js

The configurations tell webpack where our input/output is located:

At this point your folder structure looks similar to:

To run webpack, we add a command to npm script in package.json :

"build" : "webpack"

Let’s run webpack:

$ npm run build

Webpack will echo the following in terminal:

The output of Webpack bundle.js has been saved:

~/Desktop/setup-webpack2/public/scripts/bundle.j

Lets load bundle.js in web browser. To do this we need an http-server — let’s install one:

$ npm i -D --save-exact http-server

We also need a npm script in package.json to fire up our server:

"server": "http-server public -p 9090"

To load our bundle.js in web browser we need an index.html file:

~/Desktop/setup-webpack2/public/index.html

Lets fire up http-server:

$ npm run server

Enter localhost:9090 in browser address bar, we see that bundle.js has been loaded and ran in the browser:

The following illustration gives us a big picture of what has been done: