从错误的URL加载webpack-dev-server惰性模块

如何解决从错误的URL加载webpack-dev-server惰性模块

我确实有一个服务器端渲染（Java）应用程序，我想将其与webpack-dev-server集成以便快速进行开发。

我的Java应用程序在端口8080上运行。

我正在使用以下脚本来启动监听31337的webpack-dev-server。

"use strict";
const webpack = require("webpack");
const WebpackDevServer = require("webpack-dev-server");

function startServer() {
    const configFactory = require("../config/webpack.config");
    const config = configFactory("development");
    const compiler = webpack(config);

    const devServer = new WebpackDevServer(compiler,{
        port: 31337,public: "localhost:31337",});
    devServer.listen(31337);
}

startServer();

在我的服务器端应用程序中，我将所有脚本标签都更改为src=http://localhost:31337/<bundle>。对于主模块和运行时模块来说，这很好用。

但是该应用程序恰好使用了带有stenciljs的设计系统构建。导入模具时，似乎大量使用了惰性模块/惰性导入/代码拆分。在初始页面加载之后，这些块将作为head标签添加到文档的script中。

问题是，那些生成的脚本标签未使用localhost:31337作为主机，而是使用了相对路径（没有协议/主机/端口）。

是否可以解决此问题？我已经尝试使用LimitChunkCountPlugin，但这在加载页面时确实会产生运行时错误。

任何帮助将不胜感激。

结果HTML：

<base href="/" />
<script
  type="text/javascript"
  src="http://localhost:31337/js/runtime.js"
></script>
<script type="text/javascript" src="http://localhost:31337/js/main.js"></script>
<script charset="utf-8" src="/js/11.js"></script>
<script charset="utf-8" src="/js/22.js"></script>
<script charset="utf-8" src="/js/16.js"></script>
<script charset="utf-8" src="/js/1.js"></script>
<script charset="utf-8" src="/js/5.js"></script>
<script charset="utf-8" src="/js/21.js"></script>
<script charset="utf-8" src="/js/2.js"></script>
<script charset="utf-8" src="/js/18.js"></script>
<script charset="utf-8" src="/js/13.js"></script>
<script charset="utf-8" src="/js/15.js"></script>
<script charset="utf-8" src="/js/8.js"></script>
<script charset="utf-8" src="/js/24.js"></script>
<script charset="utf-8" src="/js/3.js"></script>

解决方法

执行此操作的正确方法似乎是将output.publicPath设置为完全限定的URL。

我确实将脚本更改为以下内容，这似乎可以完成工作：

"use strict";
const webpack = require("webpack");
const WebpackDevServer = require("webpack-dev-server");

function startServer() {
    const configFactory = require("../config/webpack.config");
    const config = configFactory("development");
    config.output.publicPath = "http://localhost:31337/";
    const compiler = webpack(config);

    const devServer = new WebpackDevServer(compiler,{
        port: 31337,public: "localhost:31337",publicPath: "http://localhost:31337/",});
    devServer.listen(31337);
}

startServer();