Node.js 8 the Right Way

Generating Your First webpack Bundle

At this point, you have the basic outline of a project that will build a front end using webpack, but currently it doesn’t actually build anything. In this section, we’ll get the project to the point where it generates an index.html file and produces a distributable JavaScript bundle to go along with it.

First, to generate the HTML we’ll need the html-webpack-plugin module. Install it with npm.

$ npm install --save-dev --save-exact html-webpack-plugin@2.30.1

Next, open your webpack.config.js and update it to contain the following content:

ux/b4-app/webpack.config.js

	'use strict';
	const path = require('path');
	const distDir = path.resolve(__dirname, 'dist');

	const HtmlWebpackPlugin = require('html-webpack-plugin');

	module.exports = {
	entry: './entry.js',
	output: {
	filename: 'bundle.js',
	path: distDir,
	},
	devServer: {
	contentBase: distDir,
	port: 60800,
	},
	plugins: [
	new HtmlWebpackPlugin({
	title: 'Better Book Bundle Builder',
	}),
	],
	};

At the top of the file, we pull in the built-in path module and use it to resolve the path to the dist directory. This is roughly equivalent to __dirname + ’/dist’, but uses the correct path separator for the current operating system and returns a fully resolved absolute path. We pull in the HtmlWebpackPlugin class from the included module, which we’ll use in the plugins portion of the webpack config.

Next, notice that we’ve added an output object to the webpack config. This specifies the target output directory and the filename that the bundled JavaScript output should have. By convention, we call the bundled JavaScript file bundle.js.

Note that webpack-dev-server does not write to this output directory. Instead, it serves content like the bundle.js file directly from memory on request. Running the webpack command directly, rather than webpack-dev-server, would write content to the output directory.

The devServer object contains configuration parameters specific to the webpack-dev-server. Here we use the same dist directory to be the contentBase of the running dev server, and override the default TCP port.

Lastly, we add a plugins object to add webpack plugins to the build. In the array of plugins, we construct a new HtmlWebpackPlugin instance and configure its title. This will show up in the generated HTML file’s <title> tag.

At this point the webpack config is ready, but in order to see anything other than a blank page, we should expand the currently empty entry.js file. Open that file and add the following:

ux/b4-app/entry.js

	'use strict';
	document.body.innerHTML = `
	<h1>B4 - Book Bundler</h1>
	<p>${new Date()}</p>
	`;

All this does is insert a big header and the current date and time into the page, but it’s enough to get going. Once you save the file, head to a terminal and start up the webpack dev server via npm start. If it’s still running from before, use Ctrl-C to kill it first.

With the dev server running, open localhost:60800 in your browser. It should look something like the following.

Great! Everything appears to be going smoothly so far. Next we’ll bring in Bootstrap to make the page more beautiful.

Previous Chapter

Getting Started with webpack

Next Chapter

Sprucing Up Your UI with Bootstrap

Table of Contents for Node.js 8 the Right Way

Generating Your First webpack Bundle

Table of Contents for
Node.js 8 the Right Way