Guiding principles

Only add what we need to

Keep the dependency tree flat and the application flexible. Single responsibility modules that can be added and removed without architectural changes.

Stay as close to the “common” way of doing things as possible.

Moving pieces:

In order to render our App to static HTML on the “server”

• Webpack builds a JS bundle (I’ve seen this before)

• Entry file for the app (not much different here)

• A tool for writing HTML pages (HTMLWebpackPlugin). It takes a template and outputs an index file.

• A custom plugin to stick the statically rendered app into HTMLWebpackPlugin

Let’s add JS to hydrate the app with behavior in the browser

• Webpack builds a JS bundle (I’ve seen this before)

• Entry file for the app (not much different here)

• A tool for writing HTML pages (HTMLWebpackPlugin)

• But this time, we use the HTML files built in the last step as our HTMLWebpackPlugin template files.