注入 webpack-dev-server.js答案

【问题标题】：Inject webpack-dev-server.js注入 webpack-dev-server.js
【发布时间】：2015-07-16 08:01:42
【问题描述】：

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

发件人：http://webpack.github.io/docs/webpack-dev-server.html#api

请注意 [...] WebpackDevServer API 没有内联模式。 <script src="http://localhost:8080/webpack-dev-server.js"></script> 应该手动插入到 HTML 页面中。

发件人：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上开了一个issue：https://github.com/webpack/webpack/issues/1285

【问题讨论】：

标签： javascript webpack webpack-dev-server

【解决方案1】：

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

如果设置了 inline，您只需将 webpack/hot/only-dev-server 设置为您的条目。

【讨论】：

【解决方案2】：

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 脚本）将使用其资源查询作为要连接的服务器地址。

【讨论】：

感谢您的回答 - 我以前见过这个但是它没有回答我的问题。