Генерация HTML с относительным путем к ресурсам с помощью Webpack - PullRequest
Новая
       54

Генерация HTML с относительным путем к ресурсам с помощью Webpack

0 голосов
/ 14 сентября 2018

У меня следующая структура папок src: 

/src
+-- /app
|   +-- index.js
|   +-- /templates
|       +-- index.html
|       +-- /subfolder
|           +-- nested.html
|
+-- /images
|   +-- webpack.png
| 
+-- /styles
|   +-- index.scss

Я пытаюсь настроить веб-пакет для отправки нескольких файлов HTML с использованием шаблонов из папки приложения. Конечная структура папок сборки должна выглядеть примерно так: 

/build
+-- /images
|   +-- webpack.png
|
+-- /subfolder
|   +-- nested.html
|
+-- index.html
+-- bundle.js
+-- styles.css

Проблема в том, что после сборки index.html и nested.html имеют одинаковый путь к изображению <img src="img/webpack.png">, что неверно для nested.html

nested.html должен иметь следующий путь - <img src="../img/webpack.png">.

Как сделать так, чтобы в веб-пакете был указан правильный путь к ресурсам для вложенных html-файлов?

Шаги для воспроизведения.

  1. Скачать репо 1026 *
  2. Установить пакеты npm install
  3. Выполнить npm run build

my webpack.config.js

my package.json

По этой теме с html-загрузчиком проблем нет - https://github.com/webpack-contrib/file-loader/issues/272

В документах Webpack упоминается совместное использование ресурсов между компонентами, но не приводится примеров - https://webpack.js.org/guides/asset-management/#global-assets

Варианты html-загрузчика могут иметь решение этой проблемы, но документы не имеют большого смысла для меня, и я не могу понять это - https://webpack.js.org/guides/asset-management/#global-assets

Статья, которой я следовал для динамического создания htmlWebpackPlugin - https://extri.co/2017/07/11/generating-multiple-html-pages-with-htmlwebpackplugin/

1 Ответ

0 голосов
/ 19 сентября 2018

Этим утром у меня был другой взгляд, и у меня есть способ сделать то, что ты не хочешь, хотя это не идеально.

Если вы переместите папку изображений в папку шаблонов и обновите свои URL-адреса в формате HTML + SCSS, чтобы они соответствовали.

Измените настройки загрузчика файлов для изображений, чтобы они помещались в каталог с тем же именем, что и исходный каталог. 

  ...
  {
    loader: "file-loader",
    options: {
      name: "[name].[ext]",
      // outputPath: "img/" 
      // Use same name as source
      outputPath: "images/" 
    }
  }
  ...

Добавьте тест в функцию ходьбы, чтобы она включала только html-файлы из каталога шаблонов, чтобы мы не получали ошибок при обработке изображений с помощью HtmlWebpackPlugin. 

  ...
  if (isDirectory) {
        // File is a directory
        ... code ...
      } else if (/\.html$/.test(file)) {
        ... code ...
      }
  ...

И удалите html-загрузчик, поскольку он переписывал URL-адреса изображений, ломая их относительные пути.

С этими изменениями Webpack сохранит относительные URL-адреса в ваших тегах img. Это также создаст правильную структуру для работы в вашей директории сборки. Изображения также будут работать в CSS, все время, которое загружается из вашей директории build / root.

Это не идеальное решение, было бы неплохо, чтобы все работало автоматически, как и многие другие вещи в Webpack. Но он должен выполнить то, что вы хотите сейчас, по крайней мере, пока вы не найдете лучший способ.

...