리액트 웹팩 기본 설정하기

웹팩 설정의 큰 흐름

1. 엔트리 파일을 설정한다.

2. 엔트리 파일에 모듈의 옵션을 적용한다.

3. 추가적으로 플러그인까지 적용한다.

4. 아웃풋으로 나온다.

이와 같이 큰 흐름을 알고 접근하면 웹팩설정을 이해하기 쉽다.

​

설치 모듈

npm i -D webpack webpack-cli
npm i -D babel-loader @babel/core
npm i -D @babel/preset-env // 옛날 브라우저에서도 사용 가능한 코드로 변환
npm i -D @babel/preset-react //jsx사용 가능하게 변환

 

webpack.config.js

const path = require('path')

module.exports = {
    name: 'word-relay-setting',
    mode: 'development', // 실서비스시 production으로 바꾸기
    devtool: 'eval', // hidden-source-map
    resolve: { // 확장자
        extensions:['.js', '.jsx']
    },

    entry: { // 뭐가 뭐를 불러오는지 이미 웹팩이 파악하고 있다.
        app: ['./client'],
    },
    modules:{
        rules:[{
            test: /\.jsx$/, 
            loader: 'babel-loader', // 옛날부라우저에 맞게 바꿔줌
            options: {
                presets: ['@babel/preset-env, @babel/preset-react'],
                plugin: [],
            },
        }],
    },
    output: {
        path: path.join(__dirname, 'dist'), // 현재폴더/dist 로 만들어줌
        filename: 'app.js'
    }
};

 

다음과 같이 presets에 개별 설정을 해줄 수 있다.

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

module.exports = {
    name: 'word-relay-setting',
    mode: 'development', // 실서비스시 production으로 바꾸기
    devtool: 'eval', // hidden-source-map
    resolve: { // 확장자
        extensions:['.js', '.jsx']
    },

    entry: { // 뭐가 뭐를 불러오는지 이미 웹팩이 파악하고 있다.
        app: ['./Client'],
    },
    module:{
        rules:[{
            test: /\.jsx$/, 
            loader: 'babel-loader', // 옛날 부라우저에 맞게 바꿔줌
            options: { 
                presets: [ //preset이란 플러그인들의 모음이다. 그래서 각 플러그인에 다시 옵션을 줄 수 있다.
                    ['@babel/preset-env', { 
                        targets: { browsers: ['> 1% in KR', 'last 2 chrome versions'] },
                        debug: true
                    }],
                    '@babel/preset-react'
                ],
                plugins: ["@babel/plugin-proposal-class-properties"], 
            },
        }],
    },
    plugins: [ //웹팩의 기본적인 설정외에 무엇인가 더 하고 싶을때
        new webpack.LoaderOptionsPlugin({debug: true}),
        
    ], 
    output: {
        path: path.join(__dirname, 'dist'), // 현재폴더/dist 로 만들어줌
        filename: 'app.js'
    }
};

 

자동 재시작까지 해주고싶다면 웹팩 데브서버와 리액트 핫 로더를 설치한다.

npm i -D webpack-deb-server 
npm i -D react-hot-loader

 

그리고 다음과 같이 최상위 jsx파일에 다음과 같은 설정을 추가 및 변경 해준다.

const React = require("react");
const ReactDom = require("react-dom");
const myReactFile= require("./myReactFile");
const { hot } = require("reat-hot-loader/root");
const Hot = hot(myReactFile)

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

​