1.1 What is webpack?

Webpack is a build tool that takes asset dependencies and turns them into a production ready bundle.

All code files are considered modules. Webpack loads the modules and requires them according to how the project is configured.

Why not load recuired JavaScript code via script tags?

Loading JavaScript resources as libraries using script tags can lead problems arising from:

  • the hierarchy of these scripts
  • global variables being overwritten
  • functions being called before others

In addition each script tag results in an HTTP request, which causes delays and it's very taxing on browsers.

Webpack provides an alternative to these complications with the concept of dependency graph.

We require assets like images, CSS files, and JavaScript files, and those are only loaded when they're needed for the page.

We can split up our app into different files and load just the code the page requires, then when a user goes to a new page they don't download the already downloaded code again. This minimizes the loading time of the app as well.

Webpack also helps us deal with transformations. For using Sass or LESS we can build that code into CSS prior to production.

Also for using React or ES6, we can transform that into vanilla JavaScript. All of this can be configured and then automated so that these transforms don't have to occur manually.

1.2 Installing webpack

Webpack is an NPM package: Webpack

1.2.1 Install npm

Check to see which version of node and npm we're running.

@ terminal

node -v && npm -v

If node is not present install node from: nodejs.org

1.2.2 Create a project folder

@ terminal

cd ~/Desktop && mkdir project && cd project

1.2.3 Initiate the project

npm init

NPM init is a utility that steps you through the process of setting up a node project.

It will create a package json file which will document your project and how you expect it to work (what its name is, etc…)

For entry point use the index.js file. For keywords use: Webpack, Transpiling, ES6...

Check the project folder for a package.json file.

@ terminal

ls
 
-rw-r--r--  1 smerth  staff   326B 27 Aug 14:41 package.json

with the contents:

@ package.json

{
  "name": "getting-started-webpack",
  "version": "1.0.0",
  "description": "Running a build with webpack",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "webpack",
    "transpiling",
    "es6"
  ],
  "author": "smerth",
  "license": "MIT"
}

1.2.4 Install web pack

@ terminal

npm install web pack --save-dev

1.2.5 Check the dependancy is saved

@ package.json

  "devDependencies": {
    "webpack": "^1.13.2"
  }

This same pattern applies to installing all other dependancies

1.2.6 Install jQuery

npm install jquery --save

Installs the most recent version of jQuery.

@ package.json

  "devDependencies": {
    "webpack": "^1.13.2"
  },
  "dependencies": {
    "jquery": "^3.1.0"
  }

Dev dependencies are everything needed in development, things like testing frameworks and transpiling frameworks like webpack, etc. ...

Dependencies are everything we need for the browser (jquery, react…) Things that your application will need to run in production.

1.3 Running a webpack build

1.3.1 Create main js

@ terminal

touch main.js

main.js is going to be the location for the JavaScript code for this particular example.

1.3.2 Put jQuery to work

@ main.js

var $ = require('jquery');
$('target').html('Hello World!');

1.3.3 Create index.html

@ terminal

touch index.html

Code the index page.

@ index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>My First Webpack Project</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <h1 id="target"></h1>
    <script src="/bundle.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

The script tag links to our JavaScript file called bundle.js. This will be created for us by Webpack.

1.3.4 Run Webpack

Specify the entry point (the file that we want to put through the webpack process).

Specify where we want the output file to be created.

@ terminal

webpack main.js ./bundle.js

In the folder there is a new file called bundle.js.

Around line 45, find the code from the main.js file. Webpack is also loading in jQuery.

1.4 The webpack.config file

A webpack configuration file can automate the process of running Webpack.

1.4.1 Create webpack.config.js

touch webpack.config.js

Creates a module.exports object.

Define a key called entry and the entry point will be the file that you want to put through the webpack process.

Define the output file, or where you want Webpack to write the output.

@ webpack.config.js

module.exports = {
    entry: './src/main.js',
    output: {
        filename: 'bundle.js'
    }
};

1.4.2 Organize the project code

Create a folder called src and move that main.js file into the src folder.

mkdir src && mv main.js src/main.js

Add the src folder to the Webpack config and add a build folder path for bundle.js.

Make sure to add a comma between the path and the file name.

@ webpack.config.js

module.exports = {
    entry: './src/main.js',
    output: {
        path: 'build',
        filename: 'bundle.js'
    }
}

Run webpack.

Webpack has looked in the source folder for that main.js file and also created a build folder with a bundle.js file in it.

Change the path in index.html, to link to the bundle.js file in the build folder.

<script src="./build/bundle.js" type="text/javascript" charset="utf-8"></script>

1.4.3 Run webpack with a watch flag

webpack -w

Webpack will watch to see if any changes have occurred in the main.js file. When changes occur Webpack will rebundle the files.