[webpack] 로더(loader) 사용하기

ARA JO·2021년 2월 9일

목록 보기

2/3

해당 포스팅은 실전 리액트 프로그래밍 (리액트 훅부터 Next.js까지)-이재승 의 '7장. 바벨과 웹팩 자세히 들여다보기' 를 학습하며 작성했습니다.

로더(loader)?

로더는 모듈을 입력받아 원하는 형태로 변환 후 새로운 모듈을 출력해 주는 함수다. js뿐만 아니라 이미지 파일, css파일, csv파일 등 모든 파일은 모듈이 될 수 있다.

우선, 몇가지 실습을 위해 프로젝트를 생성하자

mkdir webpack-loader
cd .\webpack-loader\
npm init -y
npm install webpack webpack-cli

js 파일 처리하기 : 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 함수를 이용한 코드로 변환해 주는 바벨 플러그인이 내장되어 있다.
- 리액트 애플리케이션을 만들 때 필요한 플러그인들의 집합
출처 : @babel/cli, @babel/preset-react 란?

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>