Question

我想注入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

Answer 1

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

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

Answer 2

webpack dev服务器客户端脚本从您自己的脚本标记的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脚本（对应于从dev服务器提供的/webpack-dev-server.js脚本）将使用其资源查询作为要连接的服务器地址。

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

注入webpack-dev-server.js

2 个答案: