[React] webpack 설정 (실시간 개발 모드 관련)

react를 webpack 설정해서 코드를 작성하고 build를 해서 확인하는 것까지는 좋았으나,

수정이 있을 때마다 빌드하고, 확인하는 것이 번거롭던 와중에..

next.js에서 develop 모드 실행시 실시간으로 반영되던 것이 생각나 방법을 찾아보았고,

webpack에서 설정할 수 있다는 사실을 알게되어, 시행착오 끝에 설정 완료한 내용을 기록 및 공유!

 

프로젝트 구조와 그에 따른 webpack 설정

 

3개의 npm 모듈을 설치

$ npm i --save-dev clean-webpack-plugin html-webpack-plugin
$ npm i webpack-dev-server

 

.env 설정과 관련된 글은 아래 포스팅을 확인해주세요.

[React] .env (환경변수파일) - 'create-react-app'과 'webpack 빌드' 프로젝트에서의 각 설정 및 사용 방법

 

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const dotenv = require('dotenv');
const webpack = require('webpack');
const path = require('path');

module.exports = () => {
  dotenv.config();

  const prod = process.env.NODE_ENV === 'production';

  return {
    mode: prod ? 'production' : 'development',
    // Webpack의 출력물에서 디버깅
    devtool: prod ? 'hidden-source-map' : 'source-map',
    output: { path: path.join(__dirname, '/dist'), filename: '[name].js' },
    devServer: {
      port: 3000,
      hot: true,
      static: {
        directory: path.join(__dirname),
      },
    },
    resolve: {
      // 확인 가능한 확장자로 '.ts' 와 '.tsx' 를 추가
      // .js가 있어야 다른 외부 라이브러리에서 js파일을 읽을 수 있음
      extensions: ['.ts', '.tsx', '.js'],
    },

    module: {
      rules: [
        {
          test: /\.ts(x?)$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'ts-loader',
            },
          ],
        },
        // 모든 '.js' 출력 파일은 'source-map-loader'에서 다시 처리한 소스 맵이 있음
        // source-map-loader를 npm install 한 상태여야 함
        {
          enforce: 'pre',
          test: /\.js$/,
          loader: 'source-map-loader',
        },
      ],
    },

    plugins: [
      new webpack.DefinePlugin({
        'process.env.SERVER_API_URL': JSON.stringify(process.env.SERVER_API_URL),
      }),
      new webpack.ProvidePlugin({
        React: 'react',
      }),
      new HtmlWebpackPlugin({
        template: './index.html',
        minify: false,
      }),
      new CleanWebpackPlugin(),
    ],
    externals: {
      react: 'React',
      'react-dom': 'ReactDOM',
    },
  };
};

• devServer - static - directory 설정을 해주지 않으면 기본적으로 경로가 /public/index.html을 가르킨다. 나는 최상위 경로에 index.html 파일이 있기 때문에 따로 설정을 해주었다.
• CleanWebpackPlugin 을 해주지 않으면 수정된 내용이 바로바로 반영되지 않는다. 아마 그 전 빌드된 내용을 기억하고 있기 때문인 것으로 생각 됨
• HtmlWebpackPlugin을 통해 실행에 필요한 index.html을 만들어준다

 

 

package.json 에 script 설정하기 (dev)

{
	// ...
	"scripts": {
		"build": "npx webpack",
		"dev": "webpack-dev-server --open --hot --progress"
	},
    // ...
}

webpack-dev-server 을 통해 실행하면 수정할 때마다 반영되는 개발 모드를 만들 수 있다!

 

 

참고

https://webpack.js.org/configuration/dev-server/

https://taenami.tistory.com/125