注入 webpack-dev-server.js

Question

我想注入 webpack-dev-server.js 文件。
但是根据文档，这应该手动完成，并且只能使用完整的 url:

发件人：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.

发件人：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>

文档中这两点的原因是什么？
为什么注入像 <script src="/webpack-dev-server.js"></script> 这样的脚本标签不是个好主意？

我还在 github 上开了一个问题：https://github.com/webpack/webpack/issues/1285

Answer 1

webpack 开发服务器客户端脚本从它自己的脚本标签的 src 属性中检索它连接到的服务器的地址，在你的例子中是 http://localhost:8080/.

请注意，您可以通过将客户端脚本添加到条目列表来直接将其包含在您的包中：

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(),
  ],
};

在这种情况下，webpack-dev-server/client/index.js 脚本（对应于从开发服务器提供的 /webpack-dev-server.js 脚本）将使用其资源查询作为要连接的服务器地址。

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

Answer 2

我认为关键在--inline。你可以通过devServer.inline: true来设置它。我最近了解到它会自动注入 webpack-dev-server/client 条目。事实上，如果您将它添加到您的条目并使用 --inline，您将得到一个重复的脚本！

如果设置了内联，您只需要为条目设置 webpack/hot/only-dev-server。

注入 webpack-dev-server.js

Inject webpack-dev-server.js

javascript

webpack

webpack-dev-server