Блог

У меня есть приложение для визуализации на стороне сервера (Java), которое я хочу интегрировать с webpack-dev-server для быстрой разработки.

Мое java-приложение работает на порту 8080 .

Я использую следующий скрипт для запуска прослушивания webpack-dev-server 31337 .

 "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();