javascript - Inject webpack-dev-server.js - Stack Overflow

admin管理员组

文章数量:1418660

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: .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: .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:

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./webpack/webpack/issues/1285

• javascript
• webpack
• webpack-dev-server

Share Improve this question Follow edited Jul 23, 2015 at 13:21 jantimon asked Jul 16, 2015 at 8:01 jantimonjantimon 38.2k2323 gold badges126126 silver badges193193 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5 +50

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.

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.

本文标签： javascriptInject webpackdevserverjsStack Overflow