Webpack Template for Classic Website Setups

Almost all Webpack templates build upon the prerequisite that the main entry point of the application is a JavaScript file. However, this is usually not the case for static websites. In this article, I am going to describe my Webpack setup which uses a standard HTML file as entry point.

Recently, I was hired as consultant to refactor a desktop application written in HTML, CSS, and JavaScript. To optimise the project workflow, and to define a common code style, I introduced the following tools and features.

My setup builds on the module bundler Webpack, including several addons and plugins to improve code quality, such as by the use of Babel to write code in the latest version of JavaScript.

One limitation however was, that the main entry point had to be an HTML file. This is in contrast to most Webpack setups, where the entry point is a JS file.

 

In the following, I will briefly describe the tools and features included in this setup.

This project is for you if you want to

  • refactor an existing application into modules (without Angular or React)
  • program in with the latest features of JavaScript
  • decouple HTML, CSS, and JavaScript code
  • have a clearly arranged Webpack setup which can be easily extended
  • introduce a common code style
  • use jQuery to manipulate the DOM

 

Checkout the project from my Github repository at https://github.com/matthiassommer/webpack-classic-website-template

Tools and Features

The project setup features the following technologies and tools:

  • Webpack 3 is a module bundler for JavaScript applications.
  • ESLint reports code issues.
  • Babel compiler to code in the latest version of JavaScript.
  • Babel polyfill emulates a full ES2015+ environment for browser support.
  • HandlebarsJS decouples HTML snippets from the JS code.
  • jQuery and jQueryUI for HTML document manipulation, event handling, and user interface interactions.

Many Webpack setups online are packed with tons of plugins and features and you need hours to understand everything. In contrast, I keep the setup as easy as possible, still including a number of valuable features.

Overview

Webpack is a module bundler that speeds up our workflow. It bundles your application into a distribution folder, whereas all CSS styles are collected in one styles.css file, all JavaScript is bundled into one bundle.js file, and all HTML is bundled into one index.html.

Additionally, I included two configuration files. One is for development, where you can use Hot Module Replacement. It rebuilds on file changes without deploying the whole application. Thereby, it speeds up the development process.

The other configuration file is used for distribution, where additional plugins, such as UglifyJs, OccurrenceOrderPlugin, and AggressiveMergingPlugin, are executed to compress the file size.

 

By using Babel and Babel polyfills, you can use the latest features of the JavaScript specifications. A polyfill implements features on web browsers that do not support these features. For example, you can use let and const  to declare variables. Furthermore, you can use arrow functions, classes, and many other features from ES2015.

 

ESLint checks your code at compile time. It reports issues related to code style and other potential problematic patterns. Thereby, you can enforce code style conventions for the developers on your team. Again, it has full support for ECMAScript 6. Predefined rule sets, such as eslint:recommended, are readily available.

 

Handlebars is a minimal template engine. It allows you to extract HTML templates from the JavaScript logic. It is really easy to understand and you will see results in next to no time. It is included in the setup via the handlebars and handlebars-loader package. I included a minimal running example in the application.

Installation

  1. Download Node.js from https://nodejs.org/en/download/ and install it.
  2. Clone or download the project from Github: https://github.com/matthiassommer/webpack-classic-website-template
  3. Go to the project folder and open a command line. To install the packages execute
    npm install

NPM will download and install packages as speficied within package.json.

Usage

To build the application with automatic rebuilding of files during development, start the application with

npm run build

This will execute webpack –progress –watch –config webpack.config.js.

To bundle your application for production, execute

npm run dist

which executes webpack –config webpack.prod.config.js .

Additionally, you can run npm run clean to empty your dist folder.

The distribution folder

Once you execute Webpack, it bundles all your code, assets, and so on, and puts it into the dist directory. Finally, your distribution folder will look like this:

dist
|– fonts/
|– images/
|– bundle.js
|– index.html
|– styles.css

Thereby, your entry point will be index.html with plain HTML. It has only one script include, that is bundle.js.

Outlook

If you would to see additional features or tool support in this setup, please let me know in the comment section!