Автор оригинала: Lawrence Whiteside.
В этой статье мы собираемся настроить боковую рендеринг сервера путем обработки даже файлов серверов с помощью WebPack. Мы установим WebPack к новой цели. Узел. Это позволит нам скомпилировать больше, чем просто JavaScript на стороне сервера.
Мы собираемся начать, где мы остановились в последняя статья Если вам нужно догнать:
git clone https://github.com/lawwantsin/webpack-course.git cd webpack-course git checkout ssr-webpack npm install
Целевой узел WebPack
Итак, в прошлый раз мы пытались сделать наши Одобрено Компонент мы побежали в проблему. Узел, Babel и Express со всеми там мощностью, не понимает изображений или урок. Узел может их потребовать или импортировать их в ES6, но узел всегда ожидает JavaScript, поэтому бросает изображение на компилятор JavaScript, и это происходит.
Круто, верно. Итак, оказывается, это довольно разрешимо. Есть несколько решений, таких как WebPack-Isomorphic-Tools Этот угон нуждается в выписке и замените его, в узле на стороне сервера. И пока это круто, это тоже устарело, так как Цель: «Узел» пришел в конфигурацию WebPack.
Целевой узел
Что нам нужно сделать, это использовать WebPack для обработки Express.js Таким образом, изображения и разметки соответствуют правильно обработаны, а затем запускают новый файл с узлом. Мы захочем создать новый «сервер» конфигурацию и добавить новый пакет.
touch config/webpack.server.js npm install webpack-node-externals
Добавьте следующее в config/webpack.server.js :
const path = require("path")
const webpack = require("webpack")
const ExtractTextPlugin = require("extract-text-webpack-plugin")
var nodeExternals = require("webpack-node-externals") module.exports = env => { return { target: "node", externals: nodeExternals(), entry: { server: ["./src/server/main.js"] }, output: { filename: "[name]-bundle.js", path: path.resolve(__dirname, "../build"), }, module: { rules: [{ test: /\.js$/, exclude: /node_modules/, use: [ { loader: "babel-loader" }] }, { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: { loader: "css-loader", options: { minimize: true } } }) }, { test: /\.jpg$/, use: [{ loader: "file-loader", options: { name: "/images/[name].[ext]", } } ] }, { test: /\.md$/, use: [{ loader: "markdown-with-front-matter-loader" }] } ] }, plugins: [new ExtractTextPlugin("[name].css"), new webpack.DefinePlugin({ "process.env": { NODE_ENV: JSON.stringify(env.NODE_ENV) } }), new webpack.NamedModulesPlugin() ] }
}
Прохладный. Итак, обратите внимание на первые 2 строки нашего конфигурации.
target: "node", externals: nodeExternals(),
Это суть разницы. С целевым узлом мы говорим WebPack объединить наши активы для узла вместо сети. Цель: «Веб» это цель по умолчанию. Это изменение позволяет WebPack расти с постоянно меняющимся миром Комплекции устройства Отказ
Внешние средства, что такое WebPack, не собирается не пакет в компиляционном времени. внешние Вариант может быть так же просто, как /node_modules/ Отказ В этом случае мы используем функцию, которая импортирована форма Узел-узел-внешние упаковка. Это принесет наши пачки пути вниз и до сих пор загружают все пакеты во время выполнения, используя обычный узел требовать () Отказ
В Выход Раздел Мы добавляем новую папку, папку сборки, поэтому скомпилированное расслоение, не сидит в общественном каталоге, как Dist Отказ Так что в терминале:
mkdir build
В Package.json Мы собираемся обновить наши сценарии.
"build:server": "BABEL_ENV=production webpack --config=config/webpack.server.js --env.NODE_ENV=production",
Теперь запустите:
npm run build:server
Взять Express.js и превратить его в Server-bundle.js Отказ
В вашем каталоге сборки вы найдете Server-bundle.js и папка изображений.
Теперь мы собираемся изменить наш скрипт прод в Package.json указывать на этот новый файл.
"prod": "NODE_ENV=production node build/server-bundle.js",
Мы можем удалить взломанные вещи в Aperot.js Наверх и заменить его нормальным требуемым.
const MarkdownData = require("../../data/post.md")
const imagePath = require("../images/link.jpg")
Итак, если мы бежим NPM запустить dev Мы должны увидеть index.ejs и main-bundle.js Горячая перегрузка как обычно. Теги стиля вводятся через стиль погрузчика.
Если мы запустим NPM Run Build: сервер и NPM запустить прод Мы запускаем сервер и видим разметку прямо в HTML.
Давайте также сделаем это на стороне развития. В Package.json :
"dev": "node --inspect build/server-bundle.js"
И, наконец, у нас есть дополнительный файл, испускаемый на сервере Build. Изображение. Давайте изменим WebPack.server.js не излучать этот файл.
{ test: /\.jpg$/, use: [{ loader: "file-loader", options: { name: "/images/[name].[ext]", emitFile: false } } ]
},
В сумме
Мы сделали это. Мы открыли дверь еще одному использованию для WebPack. Это может скомпилировать серверный код с Узел Создать цель для включения всех типов файлов. Погрузчики позволяют. С новым файлом конфигурации мы создаем пакет сервера, который включает в себя markdown и другие типы активов в рендере. Мы можем использовать один и тот же конфигурацию сервера в производстве и разработки, но мы увидим, как сломать их и почему.
git checkout ssr-webpack-final
Следующий
В наших усилиях по построить Ultimate WebPack Boeterplate, мы все еще не совсем полностью. Одна вещь, которая препятствует нашему прогрессу, мы использовали WebPack только из командной строки. В следующем эпизоде мы собираемся посмотреть с помощью WebPack в качестве функции JavaScript для запуска и перезапуска нашего сервера после компиляции WebPack. Этот следующий шаг отделяет плюсы из тех, которые никогда не изучают истинную силу WebPack. Следите за обновлениями.