React Setup, Part IV: HTMLWebpackPlugin
Good work! The hardest part is over. There is, however, still one issue.
Before webpack performs its transformations, your entry file (app/index.js) and your HTML file (app/index.html) are located in the same directory. The HTML file contains a link to the entry file, looking something like this:
After webpack performs its transformations, your new entry file will be located in build/transformed.js, and that link won’t work anymore!
At the top of webpack.config.js, add this line of code:
When you call
require('html-webpack-plugin'), the returned value is a constructor function. Most of the work of configuring HTMLWebpackPlugin should be done on an instance of that constructor function.
Add this new declaration, underneath the previous one:
The HTMLWebpackPlugin Configuration Object
That empty configuration object is where you will tell HTMLWebpackPlugin what it needs to know.
The object’s first property should be named
template‘s value should be a filepath to the current HTML file, the one that you’re trying to copy and move:
The object’s second property should be named
filename‘s value should be the name of the newly created HTML file. It’s fine to name it
index.html. Since the new HTML file will be located in the build folder, there won’t be any naming conflicts:
The object’s final property should be named
inject value should be be a string: either
When HTMLWebpackPlugin creates a new HTML file, that new HTML file will contain a
<script> tag can appear in either the HTML file’s
<body>. You choose which one via the
Here’s an full example:
The Plugins Property
You have fully configured your
HTMLWebpackPlugin instance! Now all that’s left is to add that instance to
You can do this by creating a new
module.exports property named
plugins value should be an array, containing your configured
plugins property at the bottom of
Whenever you’re ready, continue to our final article!