Super Javascript
Home About RSS Guest Blogging Free Javascipt Course

"This JavaScript course starts at the very beginning and proceeds in-depth through how the language really works, how you can use it in with the DOM, Events, JSON, Local Storage and even External APIs. Walk away feeling confident in the language."

"Wonderful course. A small investment to kickstart or accelerate your career prospects."

Enrol now

JavaScript Webpack

JavaScript Webpack

One of Javascript’s best features is you can start out really simple and learn it with just a text editor and a web browser. You can write a simple piece of HTML, add some Javascript, such as alert('hello'), and open that in your browser. You get immediate feedback about what you are doing. From there you could write code to do something when you click a button, submit a form and much more.

If you want to use other people’s scripts to help build your application, you can include them via the src attribute of the script tag. You can use the script tag to pull in great libraries, like React, JQuery and many others to make your life easier developing certain kinds of UI. There are also tools for making Excel-like tables, or code editors and much more. You can reuse so much technology that you can quickly get an impressive app made in minutes.

However there at some point, when you make a complex enough app you might hit a few problems:

Many of these problems are addressed by using a couple of tools:

It is hard to cover all of this in depth in just one article, so what I’ll do is give you a feel for how it all works, then you can decide whether to persue it further for your projects.

NodeJS

Before we move on to webpack, we need to look at NodeJS

Node can be installed on Windows, Mac or Linux and you can download from https://nodejs.org/

Once downloaded and installed you can open a command prompt or terminal and type in

node

and you will see a welcome like this:

Welcome to Node.js v12.8.0.
Type ".help" for more information.
>        

This is in interactive mode. You can now type in Javascript, for example x = 3 and it will evaluate that and return the result.

You can type .exit to quit.

Node can also run a Javascript file in your computer, for example you can create a file index.js and enter the line:

console.log('hello')

Then from the command line run

node index.js

and see what you’d expect:

hello

The file index.js can contain a complicated program, and do many cool things. Javascript in Node, unlike the browser has access to the local file system and many other resources. That means it is possible to make complete development tools in Node. And indeed Webpack is one of those tools.

But how would you get the Webpack file to run locally?

Installing things into a NodeJS project

NodeJS has an installation and package managment tool called NPM. This is simlar to package managers in other programming languages, like pip in Python or even apt-get in Debian and Ubuntu.

With node installed you can use npm right away. Typing npm at the command line shows something like this:

Usage: npm <command>

where <command> is one of:
    access, adduser, audit, bin, bugs, c, cache, ci, cit,
    clean-install, clean-install-test, completion, config,
    create, ddp, dedupe, deprecate, dist-tag, docs, doctor,
    edit, explore, get, help, help-search, hook, i, init,
    install, install-ci-test, install-test, it, link, list, ln,
    login, logout, ls, org, outdated, owner, pack, ping, prefix,
    profile, prune, publish, rb, rebuild, repo, restart, root,
    run, run-script, s, se, search, set, shrinkwrap, star,
    stars, start, stop, t, team, test, token, tst, un,
    uninstall, unpublish, unstar, up, update, v, version, view,
    whoami

npm <command> -h  quick help on <command>
npm -l            display full usage info
npm help <term>   search for help on <term>
npm help npm      involved overview

You can use this to install node packages. You can either install them globally for your machine, or locally for a project. I recommend for now always installing things locally, so that you ‘start fresh’ with each new project and know exactly what is installed. Installing locally is the default.

To get started with npm, you first create a project. Just create a folder and run a command to initalise it as follows:

mkdir test
cd test
npm init --yes

The --yes means it will say yes to all of the questions, which gives good enough defaults about the name of the project etc.

Now if you look in the folder there is a package.json which is a file that describes your project, and it keeps track of what other projects you depend on.

Now let’s install something. How about webpack!

npm install -save-dev webpack

The -save-dev means it will consider the thing you are installing a ‘developer’ dependencie, i.e. a tool that you will use to help you do development, but isn’t part of your main program.

What happens when you install

The install will take a few seconds (depending on you connection to the internet). Once this is done, some things happen in your project folder:

  1. A node_modules folder is generated which contains the source files for what you installed.
  2. In package.json a devDependencies section has been added which contains information about the package you installed.
  3. A package-lock.json file is created which details the actual versions of dependencies installed.

Take a look at all of these now, but don’t worry if you don’t understand them for now.

Now webpack is installed, how do you run it? This is a bit non-obvious, but not too hard.

Webpack has been installed into the node_modules folder. You could go and hunt for it’s script in there and run it with the node command. That would totally work. However this is the hard way because every node module has it’s files arranged in different ways.

The easier way is to edit package.json and add an entry to specify a script that you can run that in turn will run webpack. This seems convulted, and it is, but it means NPM takes care of finding the entry point of the package for you. If you edit the package.json file and add a value under scripts as follows for webpack:

...
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack"
  },
  ...

Running Webpack

You can now run webpack from npm itself:

npm run webpack

And it figures out where to find it.

Run that command now and let’s see what happens.

After a moment of consideration, it will ask you if you want to install webpack-cli which is needed to use webpack from the command line as opposed from a node program. Say yes. It will download and install that for you, as if you typed npm install --save-dev webpack-cli.

You will get an error because there is nothing for webpack to process. Yes errors suck, sorry!

It will look for a source Javascipt file src/index.js (we can configure it to look elsewhere if we wish). So let’s create a folder called src within the project folder test, and a file called index.js inside that, and add the following Javascipt code:

console.log('hello')

Now type npm run webpack again, and it will be succesful.

Once run, it will create a folder called dist (for distribution or distributable) and inside there is an main.js. What do you think will be in there? Have a guess then open it up.

Spoiler alert;

It’s a long line of weird funny Javascript, with your console.log("hello") somewhere near the end. If you didn’t guess that, it’s fine, neither did I the first time I used it.

That funny JS is code that deals with module loading, something necessary for piecing together many different packages into one bundle. It helps with modularisation, something that Javascipt on it’s own traditionally couldn’t achieve.

This code happens to be code that works both in the browser and on NodeJS. That’s not usually the case, but with a simple console.log it does work in both places. Let’s run it:

node dist/main.js

And you get the expected ‘hello’!

You can also put run it in a web page, by creating a file index.html with the following content:

<html>
	<head>
		<script src="dist/main.js"></script>
	</head>
</html>

When you open this file in a browser, and open the dev tools by pressing F12, and click the “console” tab you will see that it outputs hello there too.

Using a depedency

Webpack supports the require statment for using dependencies in your project. There are two main types:

  1. Other files in your project
  2. Other projects available via the NPM ecosystem.

Let’s try using both, and see what webpack does with these.

Local files

To reference another javascript file from your index.js you just use:

var imported = require('./otherfile.js')

To give you an idea, index.js could contain:

var imported = require('./otherfile.js')

console.log(imported.hello)

and the otherfile.js contains:

exports.hello = 'hello'

and when you run webpack, and run the generated main.js it will do as it did before and print hello.

This works because in otherfile.js the object exports becomes the return value of the require call in the other file. It’s how you teleport an object across! More accurately, the strange code we saw earlier in main.js modularises each file, then runs the module for the otherfile.js first, and get’s its return value and provides it to the module for index.js.

Although we have used a simple string here, of course you can export anything - a function, an object or a class or value, and you can export multiple things by using different properties of the export object, allowing you to export a whole suite of utilities if you need to.

NPM packages

Earlier we used npm to install webpack, a tool that we are using to package our javascript files into a single file. We can also use npm to install dependencies that we need for our source javascript to run. For example we might want to use the popular jQuery library to manipulate the browser DOM and add or remove elements from the page.

Let’s do that now.

Remember earlier we added webpack as a developer dependency. We will now add jQuery but as a regular dependency. jQuery is hosted on npm under the package named ‘jquery’. To install it we run:

npm install jquery

If we now open our package.json we can see the dependency now inside the "dependencies" section rather than "devDependencies".

  "dependencies": {
    "jquery": "^3.4.1"
  },
  "devDependencies": {
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  }
}

With this installed we can now use require in our Javascript to use JQuery. This is how we would do it inde index.js:

var $ = require('jquery')

$(document).ready(function() {
  $("<p>Hello</p>").appendTo("body");
});

In this example we use require to get the jQuery reference and assign it to a variable called $ as is customary with jQuery. We then go ahead and use $ in 2 jQuery calls, one to wait for the document to be ready, and once it is, we use it to append “Hello” to the document.

If you are following along you can now reload the index.html and see the word Hello appear in the document. Previously it appeared in the console log.

I am going to leave it here for now talking about Webpack. What we have seen is it’s default behaviour. It is very configurable though, and you can change where it gets files from, where it writes to, whether it ‘minifies’ the Javascript (make’s it smaller) or not, and even use plugins and loaders to extend it to deal with other features like converting css files or compiling files written in other programming languages, like Typescript. It’s an amazing powerful tool.

I hope to write a second article going into those options soon.

"This JavaScript course starts at the very beginning and proceeds in-depth through how the language really works, how you can use it in with the DOM, Events, JSON, Local Storage and even External APIs. Walk away feeling confident in the language."

"Wonderful course. A small investment to kickstart or accelerate your career prospects."

Enrol now

See Also