[React] 리액트 웹팩(Webpack) HotModuleReplacementPlugin

 

 

 

 

HotModuleReplacementPlugin

 

 

 

웹팩 hot-loader에서 계속 오류가 나는 상황으로 계속 삽잘하던 와중 HotModuleReplacementPlugin으로 빌드 없이 자동으로 결과화면을 확인할 수 있게 되었다.

 

 

webpack.config.js

new webpack.HotModuleReplacementPlugin({
  // Options...
});

공식문서

 

const { HotModuleReplacementPlugin } = require("webpack");

...

devServer: {
        contentBase: path.join(__dirname, '/'),
        host: 'localhost',
        port: 9000,
        hot: true,
        proxy: {
            '/api': 'http://localhost:9000'
        }
},
plugins: [
        new HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            template: './public/index.html',
            publicPath: './'
        }),
        new CleanWebpackPlugin(),
 ]

 

index.jsx

import React from "react";
import ReactDom from "react-dom";
import App from  "./App";
import style from "./app.css" ;

ReactDom.render(<App/>, document.querySelector("#root"));

if(module.hot){
    module.hot.accept();
}

 

 

package.json

"scripts": {

    "dev": "webpack serve --env NODE_ENV=development"
    
}

 

가끔 적용이 안되는 경우도 있다..