Если вы хотите использовать static-site-generator-webpack-plugin вам сначала нужно построить связку с WebPack bundle.js, который экспортирует функцию визуализации, которая принимает следующие аргументы.
locals объект с различными метаданными страницы, например. title, которые входят в параметры компонента (традиционно считаются переменными шаблона).callback nodejs стиль (err, result) обратного вызова, который вы будете называть с оказанной HTML в качестве значения для result
например
// entry.js, compiled to bundle.js by webpack
module.exports = function render(locals, callback) {
callback(null,
'<html>' + locals.greet + ' from ' + locals.path + '</html>');
};
Именно в этой функции, что вы будете создать экземпляр компоненты (возможно, с помощью React маршрутизатора, если вы хотите) и сделать их с ReactDOMServer.renderToString().
Вы затем указать скомпилированный bundle.js как bundle в вашем конкретизации StaticSiteGeneratorPlugin, а также ваши конкретные маршруты в paths и в locals объект, содержащий вышеуказанные значения метаданных.
var paths, locals; // compute paths from metadata files or frontmatter
module.exports = {
entry: {
bundle: './entry.js' // build bundle.js from entry.js source
},
...,
plugins: [
new StaticSiteGeneratorPlugin('bundle', paths, locals)
]
}
Ключи вы указываете для locals в webpack.config.js в будет присутствовать в параметре каждого вызова render(locals, callback)locals. Они будут объединены с path, assets и webpackStats ключами, предоставляемыми плагином.
Если вы хотите загрузить яваскрипт кода на свои страницы после рендеринга вы могли бы составить дополнительную page.js запись в свой WebPack конфигурацию, которая вызывает ReactDOM.render() в обычном режиме, а затем загрузить пакет в script теге, излучаемого в вашей render(locals, callback) функции в ваш bundle.js (выше). Убедитесь, что page.js монтирует компоненты в том же месте в DOM, что и при визуализации entry.js (вы, вероятно, установите атрибут id на родительский элемент). Вам также необходимо убедиться в том, что любые зависимые от местоположения местоположения (то есть маршруты) выровнены в обеих средах.
Проверьте исходный код Gatsby, который также использует этот плагин.Вы также можете посмотреть исходный код для Phenomic для альтернативного подхода.
Вы пробовали рендеринг на стороне сервера? – Bezzi
@Bezzi Можете ли вы быть более явным? Как и совместное использование файла webpack.config: D Мне нужно создать статический HTML во время сборки –
Вы можете сделать это только в том случае, если ваша страница целиком статична. Нет связи с API? – Fyre