Webpack으로 React 개발환경 설정하기

일요일에 모여 하는 스터디로 공부하고 싶은 주제를 정해 스터디원과 함께 공유하는 시간을 갖습니다.

 

첫 일요스터디로 제가 주제를 정해온 주제를 가지고 스터디하는 시간을 가졌습니다! 그동안 개념으로만 알고 있었던 webpack을 꺼내어 면밀히 살펴보고 스터디원과 함께 공유하는 시간을 가졌는데요. create-react-app을 통해 자동으로 깔렸던 webpack은 왜 필요한 것인지, 어떤 역할을 하고 있었는지 알 수 있었습니다. 그리고 빈 폴더로 시작해서 webpack으로 react 개발환경을 설정해보았습니다. 

 

webpack에 대한 정리는 이 전 포스팅에 남겨두었습니다.

https://jihye-dev.tistory.com/10

[webpack] 웹팩의 개념과 활용

 

---

 

오늘은 webpack으로 React 개발환경을 설정하는 과정을 정리하겠습니다.

 

 

1. 작업할 폴더를 만들고 package.json을 만들어 초기화 하기

mkdir webpack-study

// package.json 만들기
npm init -y

 

 

2. 바벨 설정하기

// 개발 단계에서만 사용되기 때문에 -D 옵션을 추가해 devDependencies에 설치되도록 하기
npm i -D @babel/core @babel/preset-env @babel/preset-react

🔥 바벨이 필요한 이유 🔥

바벨은 트랜스파일러로 브라우저에 호환시키기 위해 최신 버전의 자바스크립트를 구형 버전의 자바스크립트로 변환하는 역할을 하기 때문

 

babel.config.json 파일 추가하기

// babel.config.json

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

🔥 babel.config.[js/json] vs .babelrc 🔥 

babel.config.[js/json]: 여러 패키지 디렉토리를 가진 프로젝트에서 하나의 바벨 설정을 할 때 사용된다.  

.babelrc: 파일 디렉토리의 하위 집합에서 특정 변환/플러그인을 실행하려는 경우 유용하다. 프로젝트 내 서드파티 라이브러리가 바벨에 의해 변환되지 않기를 원할 수도 있기 때문이다.

 

 

3. 웹팩 설정하기

// webpack-cli: 웹팩의 커맨드라인 인터페이스, webpack-dev-server: 개발 서버를 제공
npm i -D webpack webpack-cli webpack-dev-server

➕ webpack.config.js 추가하기

// webpack.config.js

const path = require('path');

module.exports = {
  // 처리하고자 하는 파일
  entry: './src/index.js',
  output: {
    // 아웃풋으로 만들어지는 파일 이름 
    filename: 'js/[name].js',
    // __dirname = 현재 파일의 경로, path: 현재 파일의 경로/assets를 나타냄
    path: path.resolve(__dirname, 'assets'),
  },
};

➕ babel-loader, html-loader 추가하기

// babel-loader: 바벨을 웹팩에서 사용할 수 있게 해줌, html-loader: 웹팩이 html을 읽을 수 있게 해줌
npm i -D babel-loader html-loader

 

webpack.config.js에 loader 적용하기

// webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
      	// 빌드할 파일의 확장자
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: {
              minimize: true,
            },
          },
        ],
      },
    ],
  },
  // ...
};

 

➕ 플러그인 추가하기

npm i -D html-webpack-plugin

 

webpack.config.js에 플러그인 적용하기

// webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
    }),
  ],
  // ...
};

 

➕ 개발 서버 제공 패키지 설치하기

npm i -D webpack-dev-server

 

webpack.config.js에 개발 서버 적용하기

// webpack.config.js

const port = process.env.PORT || 3000;

module.exports = {
  // ...
  devServer: {
    host: 'localhost',
    port: port,
    open: true,
  },
};

package.json 스크립트 변경하기

// package.json

{
  // ...
  "scripts": {
    // webpack.config.js에서 설정했던 mode를 이곳에서 설정할 수 있음
    "start": "webpack-dev-server --mode=development",
  },
  // ...
}

 

✅ webpack.config.js의 전체 코드 보기

// webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const port = process.env.PORT || 3000;

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'js/[name].js',
    path: path.resolve(__dirname, 'assets'),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: {
              minimize: true,
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
    }),
  ],
  devServer: {
    host: 'localhost',
    port: port,
    open: true,
  },
};

 

 

4. 리액트 설치하기

npm i react react-dom

 

src/index.js, src/App.js, public/index.html 작성하기

// src/index.js

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const app = document.getElementById('app');
const root = createRoot(app);

root.render(<App />);

// src/App.js

import React from 'react';
const App = () => <div>Hello, Webpack!</div>;
export default App;

// public/index.html

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Webpack-for-react</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

 

5. npm start를 통해 애플리케이션 실행하기

index.html 템플릿에 번들된 js/main.js가 적용된 것을 확인할 수 있습니다.

 

참고 자료

https://velog.io/@syoung125/TIL-babel.config.js-vs-.babelrc%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90

https://berkbach.com/%EC%9B%B9%ED%8C%A9-webpack-%EA%B3%BC-%EB%B0%94%EB%B2%A8-babel-%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-react-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%84%B1%ED%95%98%EA%B8%B0-fb87d0027766