Last night on an working branch I converted Onomate from using the embarrassingly defunct Bower based build system into a Webpack based build. Both Onomate and my resume website still use AngularJS for content. So now it’s my resumes turn!

Getting Started

First step is installing a base set of dependencies. npm install --save-dev webpack @webpack-cli/init webpack-cli will do the job. webpack init will ask a series of questions, such as which bundles would you like to produce and the CSS technologies you will be using. After completion this will add quiet a few dependencies to your package.json file.

Out of the box this will produce dist/[name].[chunkhash].js which is great. In this case I need an index.html file which will include the base template. Yesterday I came across HtmlWebPackPlugin which seems to fit the bill. A brief npm install --save-dev html-webpack-plugin will get the plugin installed. Once install we can modify the webpack.config.js file as follows:

const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
	plugins: [
		new HtmlWebPackPlugin()
	]
}

This produces a very simple index.html page in the output:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
  <script type="text/javascript" src="resume.d41b090dbca28fcbf569.js"></script></body>
</html>

The title will annoy me to no end. Setting the property title on an object to HtmlWebPackPlugin will change that. Another nit is leaving 1-2MB files just sitting around. To address this I changed the output file name to: filename: (process.env["NODE_ENV"] == "production" ? '[name].[chunkhash].js' : "[name].js" ) which will produce the hashes. In the future I will need to find a better way to manage this as I will have many old versions on the CDN as a result.

A Reasonable Template

With that out of the way, time to keep moving forward. The technique I found working for Onomate was to define a directive to control the template. This felt like a really backwards way to implement this. so searching around turned up a simple template named default_index.ejs. Based on that I defined my own and pointed HtmlWebPackPlugin to it via the template parameter. This worked like a charm.

<!DOCTYPE html>
<html lang="en" >
<head>
    <base href='/'/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Resume of Mark Eschbach</title>
</head>
<body ng-controller="Template" ng-app="com.meschbach.resume">
</body>
</html>

I have an infinite redirect loop. I suspect this is a result of not actually loading the HTML files. The infinite redirect loop was the result of failing to load templates. npm install --save-dev html-loader with adding the following to the webpack.config.js file aided in resolving the issue.

module.exports = {
	module: {
		rules: [
			{
				test: /\.html$/,
				use: {
					loader: 'html-loader',
					options: {}
				}
			}
		]
	}
}

Mix this with a require("./file.html") and it works like a charm. This will push the html file into the bundle though. A TODO to resolve for the future I suppose.