Использование React Hot Module Reloading с JBoss (или любым другим серверным программным обеспечением)
Недавно на работе я разрабатывал приложение JavaScript, которое взаимодействует с API на основе JBoss (Java). Это приложение развертывается и обслуживается JBoss, и раньше я занимался разработкой, имея webpack смотреть сценарий с npmа потом rsync встроенные файлы в каталог, из которого их обслуживает сервер Java. В основном это связано с тем, что CORS и JBoss SSO работают только для определенных доменов (и, соответственно, портов).
Недавно я понял, что на самом деле могу значительно улучшить свой рабочий процесс с помощью HMR (горячая перезагрузка модуля) и что вполне возможно обойтись без использования узла для обслуживания вашего index.html (или что-нибудь).
Хорошо, так как мы это делаем?
Сначала вам понадобятся разные index.html файлы для размещения вашего кода JS для разработки и производства. Это верно для любой установки HMR.
Давайте посмотрим на соответствующий раздел документов Webpack.
Что это в основном говорит нам, так это то, что обычно webpack-dev-server обслуживает как первоначальный index.html файл со ссылкой на URL-адрес, который обслуживает горячую загрузку кода, и фактический код, когда мы его меняем. По умолчанию они обслуживаются на портах 8080 и 9090. Мы хотим сделать половину этого. Мы по-прежнему хотим обслуживать код с горячей загрузкой, но не index.html так как мы будем обслуживать это сами с помощью нашего собственного веб-сервера (в моем случае JBoss).
В этом руководстве предполагается, что у вас есть базовые webpack 1.x настройка уже идет. Если вы этого не сделаете, вы можете обратиться к это руководство.
Установка зависимостей
Нам нужно установить (если у вас их еще нет) html-webpack-plugin, webpack-dev-middleware, webpack-dev-server а также webpack-hot-middleware, url-loader, style-loader, file-loader.
Вы можете просто запустить npm install --save-dev webpack-hot-middleware webpack-dev-server webpack-dev-middleware html-webpack-plugin style-loader file-loader url-loader
Конфигурация веб-пакета
Далее мы обновим наш webpack.conf.js запустить сервер разработки и сделать HMR!
Ниже приведен простой пример webpack.conf.jsвы можете копировать и вставлять фрагменты, которые выглядят иначе, чем ваши собственные.
Эта конфигурация делает несколько предположений:
- Ваши созданные файлы будут выведены на
dist/ - Ваши исходные файлы живут в
src/ - Ваша точка входа в приложение
src/main.{js, jsx}(может иметь расширение js или jsx) - В той же папке, что и этот файл конфигурации, существует файл с именем
index.ejs(мы вернемся к этому через секунду)
var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var BUILD_DIR = path.resolve(__dirname, 'dist');
var APP_DIR = path.resolve(__dirname, 'src');
var config = {
devtool: 'eval',
entry: [
"webpack-dev-server/client?
"webpack/hot/only-dev-server",
'babel-polyfill',
APP_DIR + '/main'
],
output: {
path: BUILD_DIR,
filename: 'bundle.js',
publicPath: "
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new HtmlWebpackPlugin({
template: 'index.ejs'
})
],
devServer: { inline: true },
module : {
loaders : [
{
test : /\.jsx?$/,
include : APP_DIR,
loaders : ['react-hot', 'babel']
},
{
test: /\.css$/,
loader: 'style!css?sourceMap'
}, {
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff"
}, {
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff"
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/octet-stream"
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file"
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=image/svg+xml"
}
]
},
resolve: {
extensions: ['', '.js', '.jsx', '.css']
}
};
module.exports = config;
index.ejs
Это в основном шаблон webpack использует для внедрения разметки, необходимой для горячей загрузки. Это в основном просто файл html (он может вывести некоторые переменные), который обслуживает ваш пакет.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Application</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- imported CSS are concatenated and added automatically -->
</head>
<body>
<div id="app"></div>
</body>
</html>
HMR-сервер
Далее нам нужно установить экспресс (npm install --save-dev express) и создайте файл с именем server.js
То, что это делает, на самом деле обслуживает связанный файл для webpack-dev-server для отправки на страницу каждый раз, когда мы вносим изменения. у меня тоже есть style.css файл.
var express = require('express');
var app = express();
// Serve application file
app.get('/bundle.js', function(req, res) {
res.sendFile(__dirname + '/dist/bundle.js');
});
// Serve aggregate stylesheet
app.get('/style.css', function(req, res) {
res.sendFile(__dirname + '/build/style.css');
});
app.use(express.static('dev-public'));
// Serve index page
app.get('*', function(req, res) {
res.sendFile(__dirname + '/dist/index.html');
});
if (!process.env.PRODUCTION) {
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
noInfo: true,
historyApiFallback: true
}).listen(9090, 'localhost', function (err, result) {
if (err) {
console.log(err);
}
});
}
Скрипт NPM и начало работы
Сделаем новую запись в scripts раздел нашего package.json это выглядит так:
"server": "webpack --progress -p && node server.js"
Затем запустите npm run server.
Наконец, нам нужно скопировать index.html файл из нашего dist/ туда, где его ищет веб-сервер (в моем случае JBoss). Это может быть в .war/ папку/файл где-нибудь в вашей файловой системе. Этот метод работает практически для любого веб-сервера!
