Ответ 1
Итак, идея состоит в том, чтобы скомпилировать webpack с двумя отдельными конфигурациями, один из которых нацелен на web (браузер), другой - на node (на стороне сервера). Пакет на стороне сервера может потребоваться в другом node/экспресс-коде для создания предварительно визуализированного HTML с помощью css.
Вот полный пример здесь, и я проведу вас через соответствующие его части. https://github.com/webpack/react-starter
prerender.html в app - это шаблон на стороне сервера, который использует автор. Обратите внимание на следующие две строки кода:
<link rel="stylesheet" href="STYLE_URL">
<script src="SCRIPT_URL"></script>
См. здесь конфигурацию для webpack https://github.com/webpack/react-starter/blob/master/make-webpack-config.js. Параметры, передаваемые здесь, зависят от того, выполняете ли вы конструкцию prod или dev build. Поскольку мы хотим создать клиентский пакет и пакет сервера prerendering, давайте посмотрим https://github.com/webpack/react-starter/blob/master/webpack-production.config.js. Он создает два пакета, в частности первый с отдельными таблицами стилей, предназначенных для браузера, а второй - для предварительной записи.
Для первой компиляции он использует это:
plugins.push(new ExtractTextPlugin("[name].css" + (options.longTermCaching ? "?[contenthash]" : "")));
чтобы создать отдельный файл css вместе с вашим пакетом. Во время второй компиляции (для предварительной записи) она использует null-loader для загрузки стилей (потому что у нас уже есть стили, которые нам нужны в файле css, мы можем просто использовать это).
Теперь здесь, где мы вводим путь к css в ваш шаблон сервера.
Взгляните здесь на упрощенный server.js: https://github.com/webpack/react-starter/blob/8e6971d8fc9d18eeef7818bd6e9be45f6b8643e6/lib/server.js
var STYLE_URL = "main.css?" + stats.hash;
var SCRIPT_URL = [].concat(stats.assetsByChunkName.main)[0];
app.get("/*", function(req, res) {
res.contentType = "text/html; charset=utf8";
res.end(prerenderApplication(SCRIPT_URL, STYLE_URL, COMMONS_URL));
});
Предполагая, что ваш выходной путь для вашего пакета совпадает с server.js(в противном случае вы можете получить publicPath с помощью require("../build/stats.json").publicPath и добавить его к вашим STYLE_URL и SCRIPT_URL выше.
Затем в prerender.jsx: https://github.com/webpack/react-starter/blob/8e6971d8fc9d18eeef7818bd6e9be45f6b8643e6/config/prerender.jsx
Возьмите серверный шаблон prerender.html и замените URL-адреса:
var html = require("../app/prerender.html");
module.exports = function(scriptUrl, styleUrl, commonsUrl) {
var application = React.renderComponentToString(<Application />);
return html.replace("STYLE_URL", styleUrl).replace("SCRIPT_URL", scriptUrl).replace("COMMONS_URL", commonsUrl).replace("CONTENT", application);
};
Я признаю, что это может быть сложным и запутанным, и если вам будет проще использовать отдельный файл gulpfile для этого. Но поиграйте с этим. Если вам нужно больше разъяснений и помощи, вы можете оставить комментарий, и я подойду к нему, как только смогу, или вы можете использовать здесь веб-чат (https://gitter.im/webpack/webpack), Я уверен, что один из разработчиков может, вероятно, дать вам лучшее объяснение, чем я.
Надеюсь, что это несколько (?) полезно!