엔트리와 아웃풋

웹팩은 여러개 파일을 하나의 파일로 합쳐주는 번들러(bundler)다.
하나의 시작점(entry point)으로부터 의존적인 모듈을 전부 찾아내서 하나의 결과물을 만들어 낸다.
app.js부터 시작해 math.js 파일을 찾은 뒤 하나의 파일로 만드는 방식이다.

간단히 웹팩으로 번들링 작업을 해보자.

번들 작업을 하는 webpack 패키지와 웹팩 터미널 도구인 webpack-cli를 설치한다.

npm install -D webpack webpack-cli

.bin 폴도 안에를 보면 webpack과 webpack-cli가 설치된 것을 확인할 수 있다.
이렇게 설치하고나면 webpack 명령어를 사용할 수 있게된다.

node_modules/.bin/webpack --help

–help 옵션을 활용해 어떻게 사용하는 건지 알아보자.
첫번째로 필수 옵션인 --mode가 있다.
mode 옵션에는 development / production / none 이 세가지 값이 올 수 있다.
개발환경이냐 운영환경이냐에 따라 각각 development / production을 선택한다.

모듈의 시작점을 entry라고 한다.

위 부분을 웹팩에선 엔트리 또는 엔트리 포인트라고 한다.
이 엔트리를 통해서 웹팩이 모든 모듈들을 하나로 합치고, 그 결과를 저장하는 경로를 설정하는 옵션이 output 옵션이다.

위 세가지 옵션으로 우리 코드를 번들링해보자.

node_modules/.bin/webpack --mode development --entry ./src/app.js --output dist/main

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<body>
<script src="dist/main.js"></script>
</body>
</html>

위와 같이 src 경로를 수정해준 후 실행해보면 콘솔창에 숫자 3이 찍히는 것을 확인할 수 있다.
웹팩은 이렇게 여러개의 파일을 하나로 만들어주는 역할을 한다.
웹팩 설정을 할 때 지금은 필수 인자 세개(mode, entry, output)를 가지고 했지만, 이후에는 꽤 많은 옵션을 설정할 거다.

그런데 옵션이 많아지면 터미널에 명령어가 너무 길어지게된다.
이렇게 매번 긴 명령어를 칠 수 없으므로 웹팩 설정 파일을 만들어야된다.

헬퍼 문서를 보면 config 옵션 관련 설명이 있다.
웹팩 환경설정 파일 이름은 기본이 webpack.config.js 또는 webpackfile.js 이다.
우리는 webpack.config.js 파일을 생성해서 진행하도록 하겠다.

노드의 모듈문법을 사용한다.

// webpack.config.js
const path = require('path');

module.exports = {
    mode: "development",
    entry: {
        main: "./src/app.js",
    },
    output: {
        path: path.resolve('./dist'),
        filename: "[name].js"
    }
}

[name]의 효과

entry가 여러개일 때, output의 이름을 동적으로 만들 수 있는 효과가 있다.
위 상태에선 main.js 라는 이름으로 결과물이 출력된다.

{
  "name": "webpack-middle-class",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12"
  }
}

LHJ

엔트리와 아웃풋

엔트리와 아웃풋

Related Posts