Dynami c настройка html визуализированных файлов в webpack? - PullRequest
Новая
       30

Dynami c настройка html визуализированных файлов в webpack?

0 голосов
/ 07 августа 2020

У меня есть интерфейсное приложение, создающее html страниц с использованием webpack.

Я передаю параметры (например, URL-адреса) на html -страницу, например: 

new HtmlWebpackPlugin({
    template: path.resolve(__dirname, "src", "index.html"),
    title: 'Some prebuild constant here',
    some_url: variables.url
})

Эти параметры используются внутри HTML страницы следующим образом: 

Hello world. here be <a href="<%= htmlWebpackPlugin.options.some_url %>">link</a>

У меня есть большое приложение с большой кодовой базой и богатым наследием. Но мне нужны эти параметры (title, some_url), передаваемые в html не на этапе сборки, а на стороне клиента JS. Параметры должны быть загружены через ajax!

Я вижу два способа:

  • переписать весь устаревший код на долгое время, чтобы приложение действительно динамично c
  • найдите какой-нибудь встроенный плагин magi c webpack, который будет анализировать код html -страницы и заменять такие вещи, как 
<a href="<%= htmlWebpackPlugin.options.some_url %>">link</a>

на такие вещи, как 

<a href="#default_value" id="justarandomhash">link</a>

Так что позже я могу заполнить #default_values ​​следующим образом: 

document.getElementById('justarandomhash').href = variables.url;

значениями, загруженными через ajax из некоторого файла API / конфигурации 

var request = new XMLHttpRequest();
request.open('GET', '/config/test.json', false);  // `false` makes the request synchronous
request.send(null);
...