📦 웹팩(Webpack) 2 | 웹팩과 바벨로 CRA 구현하기 :: 🤓 슬기로운 개발생활

ABOUT ME

-

Today: -

Yesterday: -

Total: -

📦 웹팩(Webpack) 2 | 웹팩과 바벨로 CRA 구현하기

webpack 2021. 12. 12. 05:58
Creact-React-App

리액트에서도 es6 등 최신 문법을 사용하기 때문에 웹팩과 바벨이 필요하다. 웹팩은 파일들을 하나로 묶어 빌드시켜주기 위해 필요하고, 바벨은 최신 자바스크립트 문법도 구형 브라우저에서 잘 동작할 수 있도록 해주기 위해 필요하다.

하지만 create-react-app, CRA를 사용하면 이러한 개발 환경을 알아서 세팅해주기 때문에 우리가 웹팩과 바벨 세팅을 하지 않아도 된다.

CRA없이 직접 React 프로젝트 시작하기

CRA가 작동되는 원리를 알기 위해 CRA없이 직접 개발 환경을 구축해보자.

1. 필요한 폴더, 파일들 생성하기

직접 creact-react-app으로 리액트 프로젝트를 시작하면 아래와 같은 폴더 구조를 볼 수 있다.

여기서 public 폴더는 정적 파일(html 등)을 위한 폴더이다. src는 react javascript 코드들이 들어갈 폴더이다. 그리고 나중에 build를 하게 되면 dist라는 폴더가 생성되게 되는데, dist폴더는 웹팩으로 번들링 된 파일들이 들어가게 된다.

public, src, dist 폴더 생성

mkdir public src dist

public 폴더 안에 html 파일 생성

cd public touch index.html

src 폴더 안에 index.js 파일 생성

cd src touch index.js

2. 간단한 리액트 코드 작성하기

그 전에 react와 react-dom을 install 해야 한다.

npm install react react-dom

react와 react-dom이 성공적으로 package.json에 추가되었다면 이제 코드를 작성해보자.

index.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>React App</title> </head> <body> <div id="root"></div> </body> </html>

index.js

import React from "react"; import ReactDOM from "react-dom"; ReactDOM.render( <h1>hello world</h1>, document.getElementById('root') );

3. 웹팩 세팅하기

웹팩 설정하기 전에 웹팩을 install 해주어야 한다(개발환경에서만 사용하기 때문에 -D 옵션 추가).

npm install webpack webpack-cli webpack-dev-server -D

webpack은 기본 webpack package고, webpack-cli는 webpack을 명령어로 작동시킬 수 있도록 도와주는 도구이다. webpack-dev-server는 실시간으로 화면을 리로드 해주는 로컬 서버이다.

이제 웹팩 설정을 해주자. 웹팩은 webpack.config.js 파일에서 설정해주어야 한다.

루트 폴더 아래에 webpack.config.js 파일을 생성해주자.

touch webpack.config.js

webpack.config.js

먼저 mode와 devtool, resolve를 설정해준다.

const path = require('path'); module.exports = { mode : "development", devtool : 'eval', resolve : { extensions : ['.js', '.jsx', '.css'] }, }

- mode는 production, development, none으로 총 3가지가 있다. production모드는 실제 배포를 진행할 때 설정해주면 되고, 개발 환경일 때는 development로 설정해주면 된다.

- 보통 개발 모드에서는 devtool 설정을 eval로 한다. eval로 설정하면 코드가 난독화된다.

- resolve.extensions 설정은 특정 확장자만 빌드하는 것이다.

이제 entry point를 지정해주어야 한다. entry는 webpack 한테 어떤 파일을 시작으로 번들링을 할 것인지 알려주는 역할을 한다.

const path = require('path'); module.exports = { mode : "development", devtool : 'eval', resolve : { extensions : ['.js', '.jsx', '.css'] }, entry : path.join(__dirname, "src", "index.js"), }

위의 코드는 src 디렉토리 안에 index.js 파일을 시작으로 번들링을 하라고 알려주는 코드이다.

webpack이 돌아가면서 webpack.config.js 파일을 읽게 되는데, index.js 파일을 시작으로 index.js 파일에 연결된 파일들을 번들링해주게 된다.

이제 시작점을 지정해주었으니 파일들이 번들링되어 output될 path를 지정해주어야 한다.

const path = require('path'); module.exports = { mode : "development", devtool : 'eval', resolve : { extensions : ['.js', '.jsx', '.css'] }, entry : path.join(__dirname, "src", "index.js"), output : { path: path.resolve(__dirname, "dist") } }

위의 코드는 webpack에게 번들링 된 파일들을 dist 폴더 안에 넣어달라고 알려주는 코드이다.

html 파일이 번들링 되기 위해서는 html-webpack-plugin이 필요하다.

npm install html-webpack-plugin -D

webpack.config.js 파일에 플러그인 설정을 추가해준다.

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { mode : "development", devtool : 'eval', resolve : { extensions : ['.js', '.jsx', '.css'] }, entry : path.join(__dirname, "src", "index.js"), output : { path: path.resolve(__dirname, "dist") }, plugins : [ new HtmlWebpackPlugin({ template : path.join(__dirname, "public", "index.html") }) ], }

4. 바벨 세팅하기

웹팩으로 소스코드들을 번들링하기 전에 바벨로 먼저 자바스크립트 코드를 변환해주어야 한다.

바벨을 사용하기 위해서는 @babel/core와 babel-loader, @babel/preset-react, @babel/preset-env 를 설치해야 한다.

npm install @babel/core babel-loader @babel/preset-react @babel/preset-env

@babel/core는 core transpiler(변환기)이고, babel-loader는 webpack에서 babel을 사용할 수 있도록 도와주는 도구이다.

트랜스파일링을 할 때 자바스크립트 타입이 아닌 파일들도 트랜스파일링을 해야한다.

@babel/preset-react는 리액트 코드(jsx)를 트랜스파일링해주는 도구이고, @babel/preset-env는 es6코드를 es5로 트랜스파일링해주는 도구이다.

이제 웹팩에서 바벨을 사용할 수 있도록 코드를 추가해주자.

webpack.config.js

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { mode : "development", devtool : 'eval', resolve : { extensions : ['.js', '.jsx', '.css'] }, entry : path.join(__dirname, "src", "index.js"), output : { path: path.resolve(__dirname, "dist") }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: "babel-loader", options : { presets : ['@babel/preset-env', '@babel/preset-react'] } } }, ] }, plugins : [ new HtmlWebpackPlugin({ template : path.join(__dirname, "public", "index.html") }) ], }

위의 코드는 webpack에게 만약 .js, .jsx로 끝나는 확장자를 만나면 babel-loader로 먼저 변환을 하고 번들링을 하라고 알려주는 코드이다. 그리고 options로 @babel/preset-env와 @babel/preset-react 를 추가해주었다.

5. 로더 추가하기

웹팩은 기본적으로 js, json 파일만을 번들링하기 때문에 css 파일, 이미지 파일들을 번들링 하기 위해서는 loader라는 것이 필요하다.

예를 들어 css 파일을 번들링하기 위해서는 아래와 같이 로더들을 install 해주어야 한다.

npm i style-loader css-loader -D

그리고 babel-loader 설정과 같이 rules 안에 설정을 해주면 된다.

webpack.config.js

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { mode : "development", devtool : 'eval', resolve : { extensions : ['.js', '.jsx', '.css'] }, entry : path.join(__dirname, "src", "index.js"), output : { path: path.resolve(__dirname, "dist") }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: "babel-loader", options : { presets : ['@babel/preset-env', '@babel/preset-react'] } } }, { test: /\.css$/, use: ['style-loader', 'css-loader'] }, ] }, plugins : [ new HtmlWebpackPlugin({ template : path.join(__dirname, "public", "index.html") }) ], }

6. webpack-dev-server

webpack-dev-server를 사용하여 실시간 리로딩을 하기 위해서는 아래의 코드를 추가해주면 된다.

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { mode : "development", devtool : 'eval', resolve : { extensions : ['.js', '.jsx', '.css'] }, entry : path.join(__dirname, "src", "index.js"), output : { path: path.resolve(__dirname, "dist") }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: "babel-loader", options : { presets : ['@babel/preset-env', '@babel/preset-react'] } } }, { test: /\.css$/, use: ['style-loader', 'css-loader'] }, ] }, plugins : [ new HtmlWebpackPlugin({ template : path.join(__dirname, "public", "index.html") }) ], devServer : { hot: true, port : 9090 } }

hot은 모듈 변화를 자동으로 로드해주는 기능이고, port는 로컬에서 서버가 구동될 때 사용할 port 주소이다.

7. script 추가

이제 마지막으로 script에 명령어를 추가해주면 된다.

"scripts": { "dev": "webpack serve", "build": "webpack", ... }

npm run dev를 입력하면, hello world가 잘 출력되고 있는 것을 확인할 수 있다.

npm run dev

[참고자료]

Setup react with webpack and babel

Guide to setup react from scratch, without using create-react-app and by configuring webpack and babel manually.

medium.com

webpack

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

webpack.js.org

Babel · The compiler for next generation JavaScript

The compiler for next generation JavaScript

babeljs.io
저작자표시 비영리 변경금지

'webpack' 카테고리의 다른 글

📦 웹팩(Webpack) 1 | 웹팩의 개념, 번들러(Bundler), 웹팩 사용방법 (0) 2020.12.27
관련글 관련글 더보기
- 📦 웹팩(Webpack) 1 | 웹팩의 개념, 번들러(Bundler), 웹팩 사용방법
댓글

인기포스트

ABOUT ME

LINK

ADMIN

티스토리툴바