해당 포스팅은 실전 리액트 프로그래밍 (리액트 훅부터 Next.js까지)-이재승 의 '7장. 바벨과 웹팩 자세히 들여다보기' 를 학습하며 작성했습니다.
로더(loader)?
로더는 모듈을 입력받아 원하는 형태로 변환 후 새로운 모듈을 출력해 주는 함수다. js뿐만 아니라 이미지 파일, css파일, csv파일 등 모든 파일은 모듈이 될 수 있다.
우선, 몇가지 실습을 위해 프로젝트를 생성하자
mkdir webpack-loader
cd .\webpack-loader\
npm init -y
npm install webpack webpack-clijs 파일 처리하기 : babel-loader
시작하기 전에 [번역] babel-preset-env는 무엇이고 왜 필요한가? 를 읽어보자.
1. 패키지 설치
babel-loader를 사용하기 위해 필요한 패키지를 설치하자
npm install babel-loader @babel/core @babel/preset-react react react-dom이는 js에서 jsx 문법으로 작성된 react 코드를 처리하기 위해 필요한 패키지이다.
2. 코드 작성
루트에 src 폴더를 만들고 그 밑에 index.js파일을 만들자. index.js 파일에 아래와 같은 jsx 문법을 사용한 코드를 입력한다.
import React from 'react'
import ReactDOM from 'react-dom'
function App(){
return(
<div className="container">
<h3 className="title">Hello, webpack</h3>
</div>
)
}
ReactDOM.render(<App/>, document.getElementById('root'));
3. babel-loader 설정
-
루트에 babel.config.js 파일을 만들고 @babel/preset-react 프리셋을 사용하도록 설정하자.
@babel/preset-react
-
JSX로 작성된 코드들을 createElement 함수를 이용한 코드로 변환해 주는 바벨 플러그인이 내장되어 있다.
-
리액트 애플리케이션을 만들 때 필요한 플러그인들의 집합
-
const presets = ['@babel/preset-react']
module.exports = {presets}-
루트에 webpack.config.js 파일을 만들고 babel-loader를 설정하자.
const path = require('path'); module.exports={ entry: './src/index.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist'), }, module:{ rules:[ { test: /\.js$/, exclude: /node_moules/, use: 'babel-loader', }, ], }, mode: 'production', }test: /.js$/ js 확장자를 갖는 모듈은 babel-loader가 처리하도록 한다.
(+ 정규표현식에서 $의 의미는 'line 끝에서 일치'. 즉, 끝이 .js로 끝남 -> 확장자가 .js)
4. 실행
npx webpack웹팩을 실행해보면 dist 폴더 밑에 main.js 파일이 생성됐다.
잘 동작하는지 확인하려면 dist 폴더 밑에 index.html 을 만들고 아래와 같이 작성한다.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<div id="root"></div>
<script src="./main.js"></script>
</body>
</html>
babel-loader를 설정하지 않고 웹팩을 실행했다면, jsx문법을 이해하지 못하기 때문에 에러가 발생한다.
기타 파일 처리하기
CSS
css-loader, style-loader
JSON
웹팩에서 기본으로 제공, 로더 설치 x
PNG, TXT
file-loader, raw-loader
(png)file-loader: 모듈 내용 그대로 복사해서 dist 폴터 밑에 복사본을 만들고, 모듈을 사용하는 쪽에는 해당 모듈의 경로를 넘겨준다.
(txt)raw-loader: 모듈의 내용을 그대로 자바스크립트 코드로 가져온다.
