HtmlWebpackPlugin внедряет файлы относительных путей, которые ломаются при загрузке путей не-root сайтов

Я использую webpack и HtmlWebpackPlugin для добавления js и css в пакет в файл шаблона html.

new HtmlWebpackPlugin({
   template: 'client/index.tpl.html',
   inject: 'body',
   filename: 'index.html'
}),

И он производит следующий HTML-файл.

<!doctype html>
<html lang="en">
  <head>
    ...
    <link href="main-295c5189923694ec44ac.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="app"></div>
    <script src="main-295c5189923694ec44ac.min.js"></script>
  </body>
</html>

Это прекрасно работает при посещении рута приложения localhost:3000/, но не удается, когда я пытаюсь зайти в приложение с другого URL, например, localhost:3000/items/1 потому что связанные файлы не вводятся с абсолютным путем. Когда файл HTML загружен, он будет искать файл js внутри несуществующего /items каталог, потому что реагирующий маршрутизатор еще не загружен.

Как я могу заставить HtmlWebpackPlugin вводить файлы с абсолютным путем, так что Express будет искать их в корне моего /dist каталог, а не в /dist/items/main-...min.js? Или, может быть, я могу изменить свой экспресс-сервер, чтобы обойти эту проблему?

app.use(express.static(__dirname + '/../dist'));

app.get('*', function response(req, res) {
  res.sendFile(path.join(__dirname, '../dist/index.html'));
});

По сути, мне просто нужно получить строку:

<script src="main...js"></script>

иметь косую черту в начале источника.

<script src="/main...js></script>
Источник

3 ответа

Решение

Попробуйте установить publicPath в конфигурации вашего веб-пакета:

output.publicPath = '/'

HtmlWebpackPlugin использует publicPath для добавления URL-адресов вставок.

Другой вариант - установить базовую ссылку в <head> вашего HTML-шаблона, чтобы указать базовый URL-адрес всех относительных URL-адресов в вашем документе.

<base href="http://localhost:3000/">
Источник

На самом деле мне пришлось поставить:

output.publicPath: './';

для того, чтобы это работало не по пути ROOT. В то же время я вводил:

   baseUrl: './'

в

<base href="<%= htmlWebpackPlugin.options.metadata.baseUrl %>">

С обоими установленными параметрами это работало как очарование.

Источник

В конфиге webpack

config.output.publicPath = ''

в вашем index.html

<base href="/someurl/" />

это должно сделать это.

Источник
Другие вопросы по тегам