webpack-hot-server-middleware - GitLite

KO | EN

gitlite — search

#ai #typescript #go #android #rust #docker #nodejs #macos #kubernetes #awesome-list #security #mcp #openai #open-source

webpack-hot-server-middleware

(★ 323)

:fire: Hot reload webpack bundles on the server

파일 탐색기

최종 버전 다운로드 (.zip)

- - App.js
- - index.js
  - server.js
- - index.js
  - server.js
- client.js
- package.json
- README.md
- webpack.config.js
- yarn.lock
- .babelrc
- index.js
- - setup.js
- .babelrc
- index.test.js
.gitignore
.travis.yml
index.d.ts
LICENSE
package.json
README.md
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/60frames/webpack-hot-server-middleware

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd webpack-hot-server-middleware

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Webpack Hot Server Middleware
[![Build Status](https://travis-ci.org/60frames/webpack-hot-server-middleware.svg?branch=master)](https://travis-ci.org/60frames/webpack-hot-server-middleware) [![npm version](https://badge.fury.io/js/webpack-hot-server-middleware.svg)](https://www.npmjs.com/package/webpack-hot-server-middleware) [![Coverage Status](https://coveralls.io/repos/github/60frames/webpack-hot-server-middleware/badge.svg?branch=master)](https://coveralls.io/github/60frames/webpack-hot-server-middleware?branch=master) [![npm downloads](https://img.shields.io/npm/dm/webpack-hot-server-middleware.svg)](https://www.npmjs.com/package/webpack-hot-server-middleware)

Webpack Hot Server Middleware is designed to be used in conjunction with [`webpack-dev-middleware`](https://github.com/webpack/webpack-dev-middleware/) (and optionally [`webpack-hot-middleware`](https://github.com/glenjamin/webpack-hot-middleware/)) to hot update Webpack bundles on the server.

## Why?

When creating universal Web apps it's common to build two bundles with Webpack, one client bundle [targeting](https://webpack.github.io/docs/configuration.html#target) 'web' and another server bundle targeting 'node'.

The entry point to the client bundle renders to the DOM, e.g.

```js
// client.js

import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render(<App />, document.getElementById('root'));
```

And the entry point to the server bundle renders to string, e.g.

```js
// server.js

import { renderToString } from 'react-dom/server';
import App from './components/App';

export default function serverRenderer() {
    return (req, res, next) => {
        res.status(200).send(`
            <!doctype html>
            <html>
            <head>
                <title>App</title>
            </head>
            <body>
                <div id="root">
                    ${renderToString(<App />)}
                </div>
                <script src="/client.js"></script>
            </body>
            </html>
        `);
    };
}
```

> NOTE: The server bundle is itself middleware allowing you to mount it anywhere in an existing node server, e.g.

```js
const express = require('express');
const serverRenderer = require('./dist/server');
const app = express();

app.use(serverRenderer());
app.listen(6060);
```

Given this setup it's fairly easy to hook up hot module replacement for your client bundle using `webpack-dev-server` or `webpack-hot-middleware` however these middlewares don't handle server bundles meaning you need to frequently restart your server to see the latest changes.

Webpack Hot Server Middleware solves this problem, ensuring the server bundle used is always the latest compilation without requiring a restart. Additionally it allows your client and server bundle to share the same Webpack cache for faster builds and uses an in-memory bundle on the server to avoid hitting the disk.

## How?

It turns out hot module replacement is much easier on the server than on the client as you don't have any state to preserve because middleware is almost always necessarily stateless, so the entire bundle can be replaced at the top level whenever a change occurs.

### Usage

Webpack Hot Server Middleware expects your Webpack config to export an [array of configurations](http://webpack.github.io/docs/configuration.html#multiple-configurations), one for your client bundle and one for your server bundle, e.g.

```js
// webpack.config.js

module.exports = [
    {
        name: 'client',
        target: 'web',
        entry: './client.js'
        ...
    }, {
        name: 'server',
        target: 'node',
        entry: './server.js'
        ...
    }
];
```

> NOTE: It's important both the 'client' and 'server' configs are given a name prefixed with 'client' and 'server' respectively.

It then needs to be mounted immediately after `webpack-dev-middleware`, e.g.

```js
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotServerMiddleware = require('webpack-hot-server-middleware');
const config = require('./webpack.config.js');
const app = express();

const compiler = webpack(config);

app.use(webpackDevMiddleware(compiler, {
  serverSideRender: true
}));
app.use(webpackHotServerMiddleware(compiler));

app.listen(6060);
```

Now whenever Webpack rebuilds, the new bundle will be used both client and *server* side.

### API

**webpackHotServerMiddleware** `(compiler: MultiCompiler, options?: Options) => void`

#### Options

**chunkName** `string`
The name of the server entry point, defaults to 'main'.

**serverRendererOptions** `object`
Mixed in with `clientStats` & `serverStats` and passed to the `serverRenderer`.

### Example

A simple example can be found in the [example](example) directory and a more real world example can be seen in the [60fram.es boilerplate](https://github.com/60frames/react-boilerplate).

### Usage with `webpack-hot-middleware`

`webpack-hot-middleware` needs to be mounted *before* `webpack-hot-server-middleware` to ensure client hot module replacement requests are handled correctly, e.g.

```js
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const webpackHotServerMiddleware = require('webpack-hot-server-middleware');
const config = require('./webpack.config.js');
const app = express();

const compiler = webpack(config);

app.use(webpackDevMiddleware(compiler, {
  serverSideRender: true
}));
// NOTE: Only the client bundle needs to be passed to `webpack-hot-middleware`.
app.use(webpackHotMiddleware(compiler.compilers.find(compiler => compiler.name === 'client')));
app.use(webpackHotServerMiddleware(compiler));

app.listen(6060);
```

### Production Setup

A production setup might conditionally use [`express.static`](https://expressjs.com/en/starter/static-files.html) instead of `webpack-dev-server` and a pre-built server bundle instead of `webpack-hot-server-middleware`, e.g.

```js
const express = require('express');
const path = require('path');
const app = express();

if (process.env.NODE_ENV !== 'production') {
    const webpack = require('webpack');
    const webpackDevMiddleware = require('webpack-dev-middleware');
    const webpackHotMiddleware = require('webpack-hot-middleware');
    const webpackHotServerMiddleware = require('webpack-hot-server-middleware');
    const config = require('./webpack.config.js');
    const compiler = webpack(config);
    app.use(webpackDevMiddleware(compiler, {
      serverSideRender: true
    }));
    app.use(webpackHotMiddleware(compiler.compilers.find(compiler => compiler.name === 'client')));
    app.use(webpackHotServerMiddleware(compiler));
} else {
    const CLIENT_ASSETS_DIR = path.join(__dirname, '../build/client');
    const CLIENT_STATS_PATH = path.join(CLIENT_ASSETS_DIR, 'stats.json');
    const SERVER_RENDERER_PATH = path.join(__dirname, '../build/server.js');
    const serverRenderer = require(SERVER_RENDERER_PATH);
    const stats = require(CLIENT_STATS_PATH);
    app.use(express.static(CLIENT_ASSETS_DIR));
    app.use(serverRenderer(stats));
}

app.listen(6060);
```

## License

MIT