webpack => 핫 모듈 교체

비고

webpack-hot-middleware

webpack-hot-middleware/client 를 입력하여 webpack-dev-middleware 와 함께 사용하십시오.

구성

configs를 쿼리 문자열로 경로에 추가하십시오. 예:

webpack-hot-middleware/client?path=/__what&timeout=2000&overlay=false

선택권	기술
통로	미들웨어가 이벤트 스트림을 제공하는 경로
타임 아웃	다시 연결을 시도하기 전에 연결 해제 후 대기 시간
위에 까는 것	DOM 기반 클라이언트 측 오버레이를 비활성화하려면 false로 설정하십시오.
재 장전하다	webpack이 멈 추면 페이지를 자동으로 다시로드하려면 true로 설정하십시오.
noInfo	정보 콘솔 로깅을 사용 불가능하게하려면 true로 설정하십시오.
조용한	모든 콘솔 로깅을 사용하지 않으려면 true로 설정하십시오.
dynamicPublicPath	경로의 접두사로 webpack publicPath를 사용하려면 true로 설정하십시오. (우리는 `__webpack_public_path__` 를 런타임시 엔트리 포인트에서 동적으로 설정할 수 있습니다 ( `output.publicPath` 주를보십시오)

webpack-dev-middleware와 함께 사용

npm을 통해 webpack-dev-middleware 를 설치 하십시오.
```
npm i -D webpack-dev-middleware webpack-hot-middleware
```

webpack.config.js 수정

"entry" 정의 된 각 항목에 webpack-hot-middleware/client 를 추가합니다.

new webpack.HotModuleReplacementPlugin() 을 "plugins" 추가하십시오.

module.exports = {
    entry: {
        js: [
            './index.js',
            'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true'
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};

index.js에 추가하십시오.

var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');

var config = require('./webpack.config.js');
var compiler = webpack(config);

app.use(webpackDevMiddleware(compiler, {
    noInfo: true,
    publicPath: config.output.publicPath,
    stats: { colors: true },
    watchOptions: {
        aggregateTimeout: 300,
        poll: true
    },
}));

app.use(webpackHotMiddleware(compiler, {
    log: console.log,
}));

모듈에 HMR 사용

모듈을 핫 모듈 교체 (HMR)에 적합하게 만드는 가장 간단한 방법은 다음과 같이 module.hot.accept() 를 모듈 안에 추가하는 것입니다.

// ...

if(module.hot) {
    module.hot.accept(); // This will make current module replaceable
}

webpack-dev-server와 함께 사용

npm을 통해 webpack-dev-server 를 설치 하십시오 .
```
npm i -D webpack-dev-server
```

server.js 를 추가하여 webpack-dev-server 를 구성 webpack-dev-server .

// server.js

var webpack = require("webpack");
var WebpackDevServer = require("webpack-dev-server");
var config = require("./webpack.dev.config");

var server = new WebpackDevServer(webpack(config), {
    // ...
});

server.listen(8080);

webpack.config.js 수정
- "entry" 정의 된 각 항목에 webpack-dev-server/client 를 추가하십시오.
- "entry" 정의 된 각 항목에 webpack/hot/only-dev-server 를 추가하십시오.
  - 참고 : 필요한 경우 변경하십시오 ...
  - HMR이 실패하면 webpack/hot/only-dev-server 를 사용하여 페이지 새로 고침을 차단하십시오.
  - HMR이 실패하면 webpack/hot/dev-server 를 사용하여 페이지를 자동 새로 고침하십시오.
- new webpack.HotModuleReplacementPlugin() 을 "plugins" 추가하십시오.
```
module.exports = {
    entry: {
        js: [
            'webpack-dev-server/client?http://localhost:8080'
            'webpack/hot/only-dev-server',
            './index.js'
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};
```

webpack-dev-server 설정에 hot: true 추가하십시오

var server = new WebpackDevServer(webpack(config), {
    hot: true

    // ... other configs
});

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

webpack
핫 모듈 교체

수색…

비고

webpack-hot-middleware

구성

webpack-dev-middleware와 함께 사용

모듈에 HMR 사용

webpack-dev-server와 함께 사용