웹팩 실행하기

webpack-cli를 이용하면 CLI(command line interface)에서 웹팩을 실행할 수 있습니다. webpack-cli를 이용하지 않고 코드를 통해 직접 실행할 수도 있습니다. cra혹은 next.js같은 프레임워크에서는 세밀하게 웹팩을 다뤄야 하므로 webpack-cli를 이용하지 않고 코드에서 직접 실행합니다. 하지만 여기서는 webpack-cli를 이용해서 웹팩을 실행하는 방법만 설명합니다.

프로젝트 생성

mkdir webpack-init
cd webpack-init
npm init -y
npm install webpack webpack-cli

src/util.js

export function sayHello(name){
    console.log('hello', name);
}

src/index.js

import { sayHello } from './util';
function myFunc() {
    sayHello('mike');
    console.log('myFunc');
}
myFunc();

npx webpack으로 웹팩을 실행하면 dist 폴더가 만들어지고 그 밑에 main.js 번들 파일이 생성됩니다. index.js 모듈과 util.js 모듈이 main.js 번들 파일로 합쳐졌습니다. 이처럼 별다른 설정 없이 웹팩을 실행하면 ./src/util.js 모듈을 입력으로 받아서 ./dist/main.js 번들 파일을 만듭니다.

설정 파일 이용하기

프로젝트 루트의 webpack.config.js

const path = require('path');
module.exports = {
    entry: './src/index.js', // 1
    output: { // 2
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    mode: 'production', // 3
    optimization: { minimizer: [] }, // 4
};

1. index.js 모듈을 입력 파일로 사용합니다.
2. dist 폴더 밑에 main.js 번들 파일을 생성합니다.
3. production 모드로 설정하면 js 코드 압축을 포함한 여러 가지 최적화 기능이 기본으로 들어갑니다.
4. 번들 파일의 내용을 쉽게 확인하기 위해 압축하지 않도록 설정합니다.

npx webpack 후 생성된 dist/main.js

(function(modules) { // (1)
    var installedModules = {}; // (2)
    function __webpack_require__(moduleId) {/* ... */}
    __webpack_require__.m = modules;
    __webpack_require__.c = installedModules;
    __webpack_require__.d = function(exports, name, getter) {/* ... */}
    __webpack_require__.r = function(name, getter) {/* ... */}
    __webpack_require__.t = function(value, mode) {/* ... */}
    __webpack_require__.n = function(module) {/* ... */}
    __webpack_require__.o = function(object, property) {/* ... */}
    __webpack_require__.p = '';
    return __webpack_require__((__webpack_require__.s = 0));
})([
    function(module, __webpack_exports__, __webpack_require__) {
        'use strict';
        __webpack_require__.r(__webpack_exports__);
        function sayHello(name){ // (3)
            console.log('hello', name);
        }
        function myFunc() {
            sayHello('mike');
            console.log('myFunc');
        }
        myFunc();
    },
]);

1. 번들 파일 전체가 즉시 실행 함수로 묶여 있습니다.
2. 모듈을 관리하는 웹팩 런타임 코드입니다. 설정 파일에서 entry 파일을 여러 개 입력하면 각 entry에 의해 생성되는 번들 파일에는 웹팩 런타임 코드가 들어갑니다.
3. 우리가 작성한 코드입니다. 우리가 작성한 코드는 (1) 즉시 실행 함수의 매개변수로 입력됩니다. window, global 등의 전역 변수를 사용하는지, commonJS, AMD 등의 모듈 시스템을 사용하는지의 여부에 따라 번들 파일의 내용은 달라질 수 있습니다.

로더 사용하기

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

프로젝트 생성

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

js 파일 처리하기

가장 먼저 js파일을 처리하는 babel-loader를 알아봅니다. npm install babel-loader @babel/core @babel/preset-react react react-dom

이는 js 코드에서 jsx문법으로 작성된 리액트 코드를 처리하기 위해 필요한 패키지들입니다.

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
function App() {
    return (
        <div className="container">
            <h3 className="title">webpack example</h3>
        </div>
    );
}
ReactDOM.render(<App />, document.getElementById('root'));

프로젝트 루트의 babel.config.js

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: { // (1) 아래 끝까지
        rules: [
            {
                test: \.js$/,
                exclude: /node_modules/,
                use: 'babel-loader',
            },
        ],
    },
    mode: 'production',
};

1. js 확장자를 갖는 모듈은 babel-loader가 처리하도록 설정합니다.

index.html ``` html

index.html 파일을 브라우저에서 실행해 보면 의도한 대로 잘 동작하는 것을 확인할 수 있습니다. 만약 babel-loader를 설정하지 않고 웹팩을 실행하면 웹팩이 jsx문법을 이해하지 못하기 때문에 에러가 발생합니다.

## css파일 처리하기
`npm install css-loader`

> src/App.css
``` css
.container {
    border: 1px solid blue;
}
.title {
    color: red;
}