HTML generation with html-webpack-plugin

Ideally, you would like to be able to have Webpack manage the bundled file and its injection into the template. By default, Webpack is unable to do this, as it is only concerned with the files related to scripting. Fortunately, Webpack offers an extremely popular plugin that allows you to expand the scope of Webpack's file concerns.

Note

The code, links, and a live example of this are available at http://ngcookbook.herokuapp.com/7185/.

Getting ready

Install the plugin and add it to devDependencies of package.json with the following:

npm install html-webpack-plugin --save-dev

How to do it...

First, you'll need to incorporate the plugin into package.json if it isn't already:

[package.json] 
 
{ 
  "name": "mva-bundling", 
  "scripts": { 
    "start": "tsc&&webpack&& concurrently 'npm run tsc:w'
    'npm run wp:w' 'npm run lite'", 
    "lite": "lite-server", 
    "postinstall": "npm install -S @types...