Я частично обновляю существующее веб-приложение новым (реагирующим) кодом и использую веб-пакет, чтобы связать все вместе для производства. Поскольку существующая HTML-страница (на самом деле это XML, преобразованный в HTML) уже существует, я не могу использовать index.html, сгенерированный HtmlWebpackPlugin.
Чего я хотел бы добиться, так это того, чтобы webpack генерировал небольшой runtime.bundle.js, который будет динамически загружать другие сгенерированные чанки (main.[contenthash] и vendor.[contenthash]), вместо добавления этих записей в виде тегов script к * 1009. *. Таким образом, runtime.bundle.js можно установить на nocache, тогда как другие большие блоки могут быть кэшированы браузером и правильно извлечены при изменениях кода.
Например, вот блок тела сгенерированного index.html, обратите внимание на комментарий:
<html>
<head>...</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript" src="runtime.bundle.js"></script>
<!-- I want these two files below not injected as script tags,
but loaded from the runtime.bundle.js file above -->
<script type="text/javascript" src="vendors.31b8acd750477817012d.js"></script>
<script type="text/javascript" src="main.1e4a456d496cdd2e1771.js"></script>
</body>
</html>
Файл времени выполнения уже загружает другой фрагмент, который динамически импортируется из JS со следующим кодом:
const App = React.lazy(() => import(/* webpackChunkName: "modulex" */ './App'));
Это создает следующий фрагмент где-то внутри runtime.bundle.js
a = document.createElement('script');
(a.charset = 'utf-8'),
(a.timeout = 120),
i.nc && a.setAttribute('nonce', i.nc),
(a.src = (function(e) {
return (
i.p +
'' +
({ 1: 'modulex' }[e] || e) +
'.' +
{ 1: '0e0c4000d075e81c1e5b' }[e] +
'.js'
);
Так может ли быть достигнуто то же самое для блока vendors и main?
Единственное альтернативное решение, о котором я могу подумать, - это использовать WebpackManifestPlugin для генерации manifest.json и использовать его для вставки фрагментов в уже существующий HTML-файл.