[React] Create-react-app 없이 Webpack, Babel 빌드 해보기

2020.05.22 - [Front/React] - Create-React-App으로 React 시작하기

Create-React-App으로 React 시작하기

 

현재 사내 뿐만 아니라 토이프로젝트들도 CRA (Create React App) 로 빌드한 React 프로젝트들이 많았습니다. 하지만 많은 라이브러리 추가와 프로젝트 규모가 커지면서 빌드 및 구동 속도가 느려지고 무거워지기 시작했습니다. 이것에 대한 근본적인 해결법을 찾고자 Create React App 을 eject하는 것이 아니라 Webpack과 Babel을 이용해 가벼운 React 프로젝트를 배포하고 정적페이지 배포를 통해 서버에 대한 부담도 많이 줄어 들 수 있었습니다.

 

1. 프로젝트 폴더 생성

mkdir webpack-react
cd webpack-react
npm init -y

---

2. 의존 라이브러리 설치

npm i @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli webpack-dev-server --save-dev

npm i react react-dom babel-loader clean-webpack-plugin
npm i css-loader dotenv-webpack file-loader html-webpack-plugin
npm i mini-css-extract-plugin

설치할 라이브러리가 많습니다.. CRA가... 편한...이유...가....

하나씩 살펴 볼까요?

 

Babel

Babel은 현재 및 이전 브라우저 또는 환경에서 ECMAScript 2015+ 코드를 이전 버전과 호환되는 Javascript 버전으로 변환해주는 도구모음입니다. 자세한 내용은 babeljs.io 에서 확인하실 수 있습니다.

 

Webpack

Webpack은 최신 Javascript 앱을 위한 정적 모듈 번들러 입니다. 애플리케이션을 처리할 때 프로젝트에 필요한 모든 모듈들을 매핑하고 하나 이상의 번들로 빌드해주는 번들러입니다. 이 또한 자세한 내용은 webpackjs.org 에서 확인하실 수 있습니다.

우리는 webpack-dev-server를 사용해 개발환경에서 테스트 하겠습니다.

 

• html-webpack-plugin : 빌드한 결과물을 html 파일로 생성 해주는 Plugin
• dotenv-webpack : .env에 있는 변수를 가져올 수 있도록 해주는 Plugin
• clean-webpack-plugin : 성공적으로 빌드 후, 기존 빌드 폴더를 제거 해주는 Plugin
• mini-css-extract-plugin : 별도 CSS 파일을 만들어서 빌드해주는 Plugin

---

3. Webpack 설정

프로젝트 레벨에서 파일을 하나 생성하겠습니다.

파일명은 webpack.config.js 로 생성해주시고 아래와 같이 작성해주세요

스크롤 압박 주의 바랍니다 ...

// Imports
const path = require('path')
const Dotenv = require('dotenv-webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// Path Config
const PROJECT_ROOT = path.resolve(__dirname)
const PUBLIC_INDEX = path.resolve(PROJECT_ROOT, 'public', 'index.html')
const SRC_PATH = path.resolve(__dirname, 'src')
const BUILD_PATH = path.resolve(PROJECT_ROOT, 'build')

module.exports = webpackEnv => {
    const mode = webpackEnv.WEBPACK_SERVE ? 'development' : 'production'
    const isEnvDevelopment = mode === 'development'
    const isEnvProduction = mode === 'production'
    return {
        mode,
        entry: path.resolve(SRC_PATH, 'index.jsx'),
        output: {
            path: BUILD_PATH,
            filename: isEnvDevelopment ? 'js/[name].[contenthash:8].js' : 'js/bundle.js'
        },
        module: {
            rules: [
                {
                    test: /\.jsx?/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader',
                    }
                },
                {
                    test: /\.css/,
                    exclude: /node_modules/,
                    use: [MiniCssExtractPlugin.loader, 'css-loader']
                },
                {
                    test: /\.(png|jpe?g|gif)$/,
                    use: {
                        loader: 'file-loader'
                    }
                }
            ]
        },
        resolve: {
            extensions: ['.js', '.jsx', '.json']
        },
        plugins: [
            new HtmlWebpackPlugin({ template: PUBLIC_INDEX }), // 빌드한 결과물을 HTML 파일로 생성해주는 Plugin
            new Dotenv(), // .env에 있는 변수를 가져오는 Plugin
            new CleanWebpackPlugin(), // 성공적으로 다시 빌드 한 후 webpack의 output.path에있는 모든 빌드 폴더를 제거 및 정리
            new MiniCssExtractPlugin() // 별도로 css 파일을 만들어서 빌드하는 Plugin
        ],
        cache: {
            type: isEnvDevelopment ? 'memory' : 'filesystem',
        },
        devServer: {
            port: 3000, // port 설정
            host: 'localhost', // host 설정
            open: true, // 서버를 실행했을 때, 브라우저를 열어주는 여부 
            overlay: true, // 오류 발생 시, 브라우저에 전체 화면 오버레이를 표시
            stats: 'errors-warnings', // 컴파일 시 보여주는 항목 설정
            contentBase: path.join(__dirname, '/'), 
            compress: true, 
            watchContentBase: true, 
            watchOptions: {
                poll: true
            },
            historyApiFallback: true, 
        },
        externals: {
            'react': 'React'
        },
    }
}

---

4. Babel 설정 (.babelrc)

웹팩 설정과 마찬가지로 프로젝트레벨에서 .babelrc 파일을 생성해 준 뒤 아래와 같이 작성해 줍니다.

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

---

5. Public 폴더

프로젝트 레벨에서 /public 폴더를 생성해준뒤 하위에 index.html 파일을 만들어 줍니다.

index.html 은 아래와 같이 작성해주세요

<!DOCTYPE html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SH React App</title>
</head>
<body>
    <noscript>스크립트가 작동되지 않습니다.</noscript>
    <div id="root"></div>
</body>
</html>

---

6. React 

이쯤에서 프로젝트 구조를 한번 살펴 보자면 아래와 같이 되었을 겁니다.

아래 이미지에는 build 폴더가 있는데 무시해주세요~

프로젝트 레벨에서 /src 폴더와 하위 파일로 index.jsx / App.jsx 파일을 생성해줍니다.

index.jsx 파일은 아래와 같이 작성해주시면 됩니다.

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"

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

App.jsx 파일

import React from 'react'

function App() {
    return (
        <div>
        	<h1>Hello Webpack React</h1>
        </div>
    )
}

export default App

---

7. Package.json

위와 같이 준비가 되셨다면 이젠 빌드를 해볼 차례 입니다.

빌드를 위해 package.json 파일을 수정해 보겠습니다.

우리가 작성해야할 부분은 바로 "scrips" 부분입니다. 아래 처럼 "start"와 "build" 스크립트를 작성해주세요

{
  "name": "react-webpack",
  "version": "1.0.0",
  .
  .
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve",
    "build": "webpack --progress"
  },
  .
  .
  .
 }

작성을 완료하셨다면,

터미널을 여신 후, 아래와 같이 빌드 완료 후 Start 명령까지 해주고나면 

webpack-dev-server가 localhost:3000 (웹팩 설정 시, 포트) 를 열어주고 어플리케이션을 확인하실 수 있습니다.

npm run build
npm start

dev-server가 실행 되있는 상태에서 소스코드를 수정하면,

자동으로 빌드되고 localhost:3000에 반영되어 보여지게 됩니다.

 

이렇게 빌드된 프로젝트를 아래 포스팅을 통해

리눅스 환경에서 Nginx 를 통해 정적 웹을 배포해보실 수 있습니다.

 

2021.04.15 - [General] - [Nginx] React 프로젝트 배포하는 방법

[Nginx] React 프로젝트 배포하는 방법

 

이것으로 포스팅을 마치겠습니다.