2

我想注入 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 上打开了一个问题：https ://github.com/webpack/webpack/issues/1285

4

2 回答 2

5

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

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

于 2015-07-23T15:20:24.933 回答
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从开发服务器提供的脚本）将使用其资源查询作为要连接的服务器地址。

另请参阅 中的相关代码片段webpack-dev-server/client/index.js。

于 2015-07-22T10:05:57.123 回答