Inject webpack-dev-server.js

Question

I would like to inject the webpack-dev-server.js file.
However according to the documentation this should be done manually and only with the full url:

From: http://webpack.github.io/docs/webpack-dev-server.html#api

Notice that [...] there is no inline mode for WebpackDevServer API. <script src="http://localhost:8080/webpack-dev-server.js"></script> should be inserted to HTML page manually.

From: http://webpack.github.io/docs/webpack-dev-server.html#hot-mode

<!-- It is important that you point to the full url -->
<script src="http://localhost:8080/webpack-dev-server.js"></script>

What is the reason for those two points from the documentation?
Why wouldn't it be a good idea to inject a script tag like <script src="/webpack-dev-server.js"></script>?

---

I have also opened an issue on github: https://github.com/webpack/webpack/issues/1285

Answer 1

I think the key is in --inline. You can set it through devServer.inline: true. I learned recently that it injects webpack-dev-server/client entry automatically. In fact if you add it to your entry and use --inline, you'll end up with a duplicate script!

If inline is set, you need to set just webpack/hot/only-dev-server to your entries.

Answer 2

The webpack dev server client script retrieves the address of the server it connects to from its own script tag's src attribute, in your case http://localhost:8080/.

Note that you can directly include the client script in your bundle via adding it to the entry list:

module.exports = {
  entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './src/index'
  ],
  output: {
    filename: 'bundle.js',
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ],
};

In which case the webpack-dev-server/client/index.js script (which corresponds to the /webpack-dev-server.js script served from the dev server) will use its resource query as the server address to connect to.

See also the relevant snippet of code in webpack-dev-server/client/index.js.