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

116

Я использую 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каталога, потому что response-router еще не загружен.

Как я могу заставить 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>
javascript express webpack react-router Aherriot
источник

Ответы:

201

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

output.publicPath = '/'

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

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

<base href="http://localhost:3000/">
Магнус Сьюнгаре
источник
7
Спасибо, добавление output.publicPath = '/'было решением.
Aherriot 06
3
Это не сработает, если вы используете обратный прокси.
t-my
4
Вы также можете использовать его просто, <base href="https://stackoverflow.com/">чтобы избежать жесткого кодирования имени хоста в шаблоне HTML или необходимости интерполировать переменные.
Рафа
Мне пришлось установить publicPath = '' и добавить <base href = "~ / dist /">, поскольку мой сайт является проектом ASP.Net MVC с использованием IIS и виртуального каталога.
более срочная шутка
16

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

output.publicPath: './';

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

   baseUrl: './'

в 

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

С обоими параметрами все заработало отлично.

Кевин ФОНТЕЙН
источник
Это показывает в URLбраузере как https://localhost/myproject/%3C%=%20htmlWebpackPlugin.options.baseUrl%20%%3E#/project/1. Есть ли способ решить эту проблему?
NehaM 06
Где вы устанавливаете baseUrl: '.'это в параметрах HtmlWebpackPlugin? { meta: { baseUrl: './' } }?
Something
@SomethingOn У меня сейчас нет этого проекта веб-пакета, и я думаю, что с тех пор, как я опубликовал этот ответ, многое изменилось (включая значение по умолчанию). Так что да, это определенно то место, где он должен быть установлен, но './'это правильное значение.
Кевин ФОНТЕЙН
1
Теперь он может напрямую вводить базовый тег. inject base tag
Лян
2

в конфигурации webpack 

config.output.publicPath = ''

в вашем index.html 

<base href="/someurl/" />

это должно сработать.

Ханнад Рехман
источник