Inject javascript entry point into html files with webpack dev server?

Question

Is it possible to inject the JS entry point into the webpack dev server, much like the CSS is injected inline?

For example, my index.html is:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>app</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

But what I would like to see is, after running my webpack dev server, something like this (note that the CSS is injected automatically, although I do not see the js reference):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>app</title>
    <style>*,*:after,*:before{margin:0;padding:0}html{ /* .. all other styles */ }</style>
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="/js/app.js?1d8f26165af69413a6bb"></script>
</body>
</html>

Is this possible?

Dmitriy Nevzorov · Accepted Answer · 2016-07-17 11:34:10Z

4

Yes, its possible. You need to use HTML Webpack Plugin

The plugin will generate an HTML5 file for you that includes all your webpack bundles in the body using script tags. Just add the plugin to your webpack config as follows:

var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpackConfig = {
  entry: 'index.js',
  output: {
    path: 'dist',
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin()]
};

This will generate a file dist/index.html containing the following:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
    <script src="index_bundle.js"></script>
  </body>
</html>

answered Jul 17, 2016 at 11:34

Dmitriy Nevzorov

6,0881 gold badge24 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

bitten Over a year ago

Great, this is exactly what I needed. I ended up using a template, as I needed the <div id="app"></div> inside. Thanks!

Konrad Over a year ago

Doesn't work for dev server for some reason

Collectives™ on Stack Overflow

Inject javascript entry point into html files with webpack dev server?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related