Универсальный рендеринг — это круто. Тем не менее, это также проблема, связанная с различными требованиями на стороне сервера.Зависимые файлы ресурсов, такие как css или ресурсы изображений, не могли быть импортированы как рендеринг на стороне сервера с помощью дефолт. babel-plugin-webpack-loaders — отличный плагин для Babel. Он использует систему загрузчика webpack для правильного анализа ресурсов. После того, как вы установите его, вы можете настроить плагин в .babelrc или зарегистрировать способ, чтобы сообщить Babel, как требовать эти файлы, кроме javascript. Конфигурация проста. Во-первых, вы должны предоставить конфигурацию веб-пакета, единственная необходимая часть — это libraryTarget, который должен быть установлен в commonjs2 в выходной части:
output: { libraryTarget: ‘commonjs2’ }
Затем просто установите загрузчики веб-пакетов обычными способами:
loaders: [ {
test: /\.css$/,
loaders: [ ‘style-loader’, ‘css-loader’, ‘postcss-loader’, ]
} ]
минимальная конфигурация для css-загрузчика
Вы можете загрузить свой Babel с помощью настройки в .babelrc. Имеет смысл настроить его способом register:
require(‘babel-core/register’)({
“plugins”: [
[“babel-plugin-webpack-loaders”,
{ “config”: “./webpack.config.universal.js”, “verbose”: false }]
]})
//server start here
require('./my-express-server')
Вот и все! теперь все должно работать нормально. Кроме того, возможно, вы захотите объединить ресурсы с помощью ExtratTextPlugin для создания имен файлов чанков. Вы также можете использовать assets-webpack-plugin, чтобы получить связанные имена файлов, записанные в определенный файл json:
{“main”:{“js”:”/static/main.2bcf7ddc93ada922416e.js”,”css”:”/static/main-79e081feef5d69b7eb56.css”}}
и получить доступ к этим именам файлов, просто прочитав файл ресурса:
const assets = JSON.parse(fs.readFileSync(‘./build/assets.json’, ‘utf-8’))
Теперь у вас есть эти объединенные имена файлов.
