As you can see, we can inject variables from the plugin using the htmlWebpackPlugin.options object between the <%= and %> delimiters. Now it's time to test our application, try to run the npm run build command:

Big red error: Can't resolve ./src directory, but what does it mean? Do you remember how we used the .jsx extension in our files? Even we added that extension to our babel-loader rule so why is not working? It's because we had to add a resolve node to our configuration and specified the file extensions we want to support. Otherwise, we have to use only the .js extension:

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

  const webpackConfig = {
    module: {
      rules: [
        {
          test: /.(js|jsx)$/,
          exclude: /node_modules/,
          use: 'babel-loader'
        }
      ]
    },
    plugins: [
      new HtmlWebPackPlugin({
        title: 'Codejobs',
        template: './src/index.html',
        filename: './index.html'
      })
    ],
    resolve: {
      extensions: ['.js', '.jsx']
    }
  };

  module.exports = webpackConfig;

If you run npm run build again, now it should work:

After you run that command, you will see that you have two files in your dist directory: index.html and main.js. If you open your index.html file with Chrome, you should see the following result:

We can build our bundle, but it is 100% static. In the next recipe, we are going to add Webpack Dev Server to run our React Application in an actual server and refresh the server every time we make a change.