Inject a JavaScript bundle into HTML with the HtmlWebpackPlugin
Even if it's only a simple one, we'll need to serve up an HTML file to run our JavaScript app. We can hardcode the bundle path into a script tag, but then if we want to change our bundle name, we need to update that in our webpack config and in our html file. In this lesson, we'll see how to use the HtmlWebpackPlugin to inject the script tag for our bundle into an HTML template file.
Instructor: [00:00] Since we're building a React app, we're going to need an HTML file hosted from. We can let webpack generate this file for us. In order to do that, we're going to do an npm install with the -d flag to save it as a dev dependency.
[00:14] We're going to install the HTML Webpack Plugin. Now that we have that installed, let's update our webpack config to use our new plugin. Up the top, I'm going to start with const HtmlWebpackPlugin, and this is going to be require('html-webpack-plugin').
[00:43] Then down at my configuration object, I'm going to add a plugins key at the end. This is going to be an array of plugins. I only have the ones, so I'm going to pass a new instance of HtmlWebpackPlugin. Then, I'll save the file.
[01:01] Back in my terminal, I'm going to do an npm run build. Once that's done, we'll see that we have an entry here for index.html. If we look at the dist directory, we're now outputting our app.bundle.js file and an index.html file.
[01:18] If I open that up, we'll see that there is a script tag automatically appended to the body for our app.bundle.js file. If I go back into the terminal, I'm going to open this by passing in path to dist/index.html.
[01:33] When that opens, we'll just keep pointing at the HTML file, but you'll notice that we don't see the React app. The problem is, this generated HTML file doesn't have the div that a React app once demount to.
[01:46] What we can do is, supply a template for that HTML file. In source, I'm going to add a new file and I'm going to call it index.html. I'm going to give it a Boilerplate HTML, so I'll get rid of those.
[02:01] We can give this a title called React Boilerplate. I'm going to add a language attribute to the HTML tag. I'm going to come down into the body and I'm going to create a div. I'm going to give it an ID of app, because that's what our ReactDOM that render call is looking for.
[02:23] I'm going to save that. Back in the webpack.config file, I'm going to pass some values into the constructor for this plugin. I'll pass in an object and I'm going to specify a template. That template is going to be in source index.html and I'm going to save it.
[02:41] I'm going to drop down into the terminal. I'm going to run a new npm run build. I'm going to go back to the HTML file and refresh it. Now we should see our "Hello, World!" show up.
[02:53] If we look back at the dist directory, the index.html file that was output is our template plus the injected script tag in the body.
You can try downloading the github code from this episode and compare. I had a problem too earlier, the console is outputting a.render is not a function. Silly typo where I imported react instead of react-dom.
You can try downloading the github code from this episode and compare. I had a problem too earlier, the console is outputting a.render is not a function. Silly typo where I imported react instead of react-dom.
I installed latest htmlwebpackplugin and configured but when I ran the build I received this error "TypeError: Cannot read property 'tap' of undefined" in the terminal
I fixed by installing the same version in the video https://github.com/avanslaars/egghead-react-boilerplate/blob/09_html_webpack/package.json#L27 (not the latest version)
At this step, I am getting the following error: Uncaught Error: Target container is not a DOM element in console and in terminal, a verbose error log saying how it doesnt recognize html template. Please help with this. Thanks!