Привет!
Есть вот такой React-проект:
package.json
{
"main": "dist/server.js",
"scripts": {
"build:app": "webpack --config ./webpack.app.config.js",
"build:server": "webpack --config ./webpack.server.config.js",
"start": "node ."
},
...
}
yarn build:app запускает сборку React-приложения в конечный файл
dist/app.js:
webpack.app.config.js
module.exports = {
entry: ['./src/app.tsx'],
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'dist'),
},
}
yarn build:server запускает сборку сервера, который отдаёт веб-приложение, а также предоставляет некоторое дополнительное API:
webpack.server.config.js
module.exports = {
target: 'node',
entry: './src/server.tsx',
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
output: {
filename: 'server.js',
path: path.resolve(__dirname, 'dist'),
},
}
server.tsx
const app = express()
app.use(express.static(path.resolve('dist')))
app.get('/my-api', (req, res) => {
// ...
})
app.get('*', (req: Request, res: Response) => {
res.set('Content-Type', 'text/html')
res.send(
`<!doctype html>${renderToString(
<html>
<head>
<meta charSet="utf-8" />
<title />
<meta
name="viewport"
content="initial-scale=1.0, maximum-scale=1.0"
/>
</head>
<body>
<div id="root" />
<script src="/app.js" />
</body>
</html>,
)}`,
)
})
app.listen(3050)
Запускается проект командой
yarn start.
ЗАДАЧА:
Прикрутить HMR.
Чтобы можно было налету обновлять
app.js и приложение тоже обновлялось без необходимости всё перезапускать.
HMR на серверной стороне необязателен. В
server.js изменения нечастые.
Как это реализовать?
Next.js не предлагать :))
Простой
Простой
