[Webpack] 웹팩으로 리액트 개발환경 셋팅하기

romini·2021년 11월 18일

React webpack

0. 웹팩을 왜 사용할까?

여러개로 나누어져있는 파일들을 하나로 묶어서 효율성을 향상시킨다.

1. 개발환경 초기화

npm init

package.json 파일이 생성된다.

2. 리액트 설치

npm install react react-dom

3. 웹팩 설치

npm i -D webpack webpack-cli

-D : 개발용으로만 웹팩을 사용함 실제 서비스 할 때는 사용하지 않음

 "dependencies": { // 실제 서비스에서 사용됨
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": { // 개발용으로만 사용됨
    "webpack": "^5.64.1",
    "webpack-cli": "^4.9.1"
  }

4. webpack.config.js와 index.jsx 파일 생성

4-1. webpack.config.js

const path = require('path');

module.exports = {
    name: 'webpack-setting',
    mode: 'development', // 실서비스 : production
    devtool: 'eval', // 빠르게

    entry: { //제일 중요!
        app: ['./index.jsx'],
    }, // 입력
    output: {
        path: path.join(__dirname, 'dist'), // 현재 폴더의 dist폴더에 생성
        filename: 'app.js'
    }, // 출력
};

4-2. index.jsx & App.jsx

index.jsx

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

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

App.jsx

import React from 'react'

function App() {
    return (
        <div className="App">
            hello world!
        </div>
    )
}

export default App;

5. index.html 작성

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script src="./dist/app.js"></script>
</body>
</html>

6. webpack 실행

package.json에 아래와같이 명령어를 작성하고 npm run dev로 웹팩을 실행해보자.

"scripts": {
"dev": "webpack"
},

dist폴더 안에 app.js 파일은 정상적으로 생성 되었지만 아래와같이 App파일 타입(.jsx)을 이해할 수 없다고 에러가 뜬다.

6-1. babel 설치

npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader

babel/core : 바벨의 기본적인 것들이 들어있음.

babel/preset-env : 내 환경에 맞게 알아서 최신문법을 옛날문법으로 바꿔줌

babel/preset-react : jsx지원

babel-loader : 바벨과 웹팩을 연결

6-2. package.json에 추가

    // entry에 있는 파일을 읽고 module을 적용한 후 output
    module: {
        rules: [{
            test: /\.jsx?/,
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env', '@babel/preset-react'],
            },
        }],
    },

이제 jsx파일을 정상적으로 읽어올 수 있을 것이다.

7. 웹팩을 다시 실행하고 index.html을 열어보자.

리액트 앱이 정상적으로 잘 만들어졌다!

8. 웹팩 데브서버 생성 및 핫 리로딩 설정하기

아래 두가지를 설치하자

npm i react-refresh @pmmmwh/react-refresh-webpack-plugin -D

npm i -D webpack-dev-server

웹팩 데브 서버를 실행하기 위해 package.json에 명령어를 추가하자

"scripts": {
    "dev": "webpack serve --env development"
  },

webpack.config.js를 수정

const path = require('path');
const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

module.exports = {
    name: 'webpack-setting',
    mode: 'development', // 실서비스 : production
    devtool: 'eval', // production : hidden-source-map
    resolve: {
        extensions:['.js','.jsx']
    },

    entry: { //제일 중요!
        app: './index',
    }, // 입력

    // entry에 있는 파일을 읽고 module을 적용한 후 output
    module: {
        rules: [{
            test: /\.jsx?/,
            loader: 'babel-loader',
            options: {
                presets: [
                    ['@babel/preset-env', {
                      targets: {
                        browsers: ['> 1% in KR'], // browserslist
                      },
                      debug: true,
                    }],
                    '@babel/preset-react',
                  ],
                plugins: [
                    '@babel/plugin-proposal-class-properties',
                    'react-refresh/babel'
                ],
            },
        }],
    },

    plugins : [ //빌드 할때마다 실행됨
        new RefreshWebpackPlugin()
    ],
    output: {
        path: path.join(__dirname, 'dist'), // 경로를 합쳐줌
        filename: 'app.js',
    }, // 출력
    devServer: {
        static: {directory: path.resolve(__dirname)},
        port: 8080,
        devMiddleware: {publicPath:'/dist/'},
        hot: true,
    },
};

npm run dev 명령어 입력 후, 로컬호스트:8080으로 접속해보면 정상적으로 데브서버가 생성되었고 변경사항이 적용된다.