Installing Webpack on Ubuntu 18.04 ( Part III )

Read responsibly, check out my disclaimer page.

If you’ve followed the instructions in the last post, part II, you should have npm and webpack installed. We verified the installation by bundling the files in our src directory. We found that the index.html would not bundle unless we installed the HtmlWebpackPlugin, which we installed and verified as well. We will continue along this journey and install the webpack-dev-server.

Webpack-Dev-Server (WDS)

If you’ve been working with JavaScript, you’re probably familiar with manually doing the following:

1. Referencing your JavaScript file within your html file.
2. Refreshing the web browser to reflect whatever changes you made to your JavaScript file.

* The two things listed above can be quite tedious and can extend the timeline of your project if you have to do them over and over again. This is where webpack-dev-server comes into play. *

So what is webpack-dev-server any? It is a development server that is ran locally on your machine. It can operate in different modes. However, the one we care about is watch-mode. Watch-mode is the is a feature that gives WDS the ability to actively-watch for changes in your files. When it picks up on new changes to your files, it then updates the bundled files with the new contents; in memory; while auto-magically refreshing your web browser; just beautiful!

So let’s begin. Execute the following:

npm install webpack-dev-server --save-dev

WDS is a devDependency so you should see it listed under the devDevpendencies property with your package.json file:

Just execute cat package.json

 "devDependencies": {
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1"
  }
}

Then we will need to configure it in the webpack.config.js file. Add the devServer property to the module.exports object.

  devServer: {
    contentBase: path.join(__dirname, './dist'),
    compress: true,
    port: 9000
  },

Now we’re ready to test it out. Execute the following:

npx webpack-dev-server –mode-development –open

Note that the default prompt for your terminal will not appear while you have an active session running. To close the session, just hit control C. You should not see a bunch of information relating to the session and if everything was done correctly, “Compiled Successfully” should be at the bottom.  Your web browser should have also opened up with the rendered contents from your html file.

Open up your browser’s console and verify that you see the output produced by the index.js file. 

Now, open your index.js file, make an adjustment to it; changing it from:

This:

function f1(arg){
	return arg;
};
console.log(f1('If you can see this, then webpack is working!'));

To this:

function f1(arg){
	return arg;
};
console.log(f1(123456789)); // <-------

Pay attention to the terminal while you save your changes; you will see WDS re-bundle your files and your web browser refreshed to reflect those changes. 

Do the same for your index.html file. Add an h1 tag with the following:

<h1>I created this h1 tag while using Webpack-dev-server!</h1>

Now hit save; WDS should have successfully updated your changes.

Congratulations, you have successfully installed webpack!

npm Scripts

Earlier in this tutorial, I made mention to there being an easier way to run your commands; as it can be a bit tedious and downright annoying to run very long commands on a constant basis. Fortunately, you can create scripts within the package.json file to make things easier. Let us create two scripts for webpack and the other for webpack-dev-server; both for development.

Add the following under the scripts property:

  "scripts": {
  	"build": "webpack --mode development",
  	"start": "webpack-dev-server --mode development --open",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

Now we test. Delete all the files in your dist directory:

rm ./dist/*

Then rebuild your files:

npm run build

Now, we run WDS:

npm run start

“What do I need to, first,  run npm run build?

The reason is that WDS will not initially bundle your files into the dist directory, it will compile them in memory. If you want to see your files in the dist directory , you must execute use the npm run build prior to you using WDS.

You now know how to utilize npm scripts for your commands.

If you found this tut hopeful, let me know in the comments below. If you did not find this tut helpful or if I could have done anything better, let me now anyway; as I love constructive criticism.