Javascript 모듈 다루기, 그리고 webpack으로 bundling하기

Javascript 모듈 다루기

script를 다음과 같이 사용하는 것은 모듈화가 되어있지 않은 상태입니다. 이 상태에서는 각 script에 해당하는 js파일들은 서로 스코프를 공유하고 있습니다. 가령 다음과 같은 예시 코드에서는 scriptB.js 안에 있는 코드에서 scriptA.js에 있는 변수에 접근할 수 있습니다.

<script src="./js/scriptA.js"></script>
<script src="./js/scriptB.js"></script>
<script src="./js/scriptC.js"></script>
<script src="./js/scriptD.js"></script>

반면 javascript ES6부터는 import/export 구문으로 모듈을 다룰 수 있게 되었습니다. 각각의 모듈은 import/export 구문에 의해서 의존성을 추적할 수 있습니다. 한편, 모듈을 html에서 사용하기 위해서는 script 태그에 type="module"을 명시해줘야 합니다.

* index.html

<script src="./js/index.js" type="module"></script>

* index.js

import moduleA from "./moduleA.js";

// 메인 실행 코드

* moduleA.js

import moduleB from "./moduleB.js";

const moduleA = {
	// moduleB에 의존성을 가지는 내부 로직
};

export default moduleA;

* moduleB.js

const moduleB = { };

export default moduleB;

위와 같은 형태로 모듈 파일들을 구성하면 index.html가 실행되었을 때, index.js -> moduleA.js -> moduleB.js 와 같은 의존성에 의해 각각의 모듈이 실행됩니다. 모듈화가 되었기에 각각의 모듈 파일은 서로의 스코프를 공유하지 않고, 캡슐화와 정보은닉이 된 상태입니다.

webpack으로 bundling 하기

javascript 모듈의 기능은 bundler인 webpack을 사용하면 더욱 강력해집니다. webpack은 js모듈의 의존관계를 추적해서 하나의 파일 혹은 n개의 파일로 bundling 해줄 수 있는 도구입니다. code를 minify 시켜줄 수도 있고, 페이지에서는 빌드된 파일만을 불러오기 때문에 페이지 로딩 속도가 개선되며, 자원 소비도 줄일 수 있다는 장점이 있습니다.

webpack 실습

사전 준비 - node.js 설치 & 프로젝트 폴더 및 파일 준비

webpack은 node에서 작동하므로 사용하기 위해서 node.js를 먼저 설치해야 합니다.

node.js 설치방법

지금부터 webpack으로 js 파일들을 bundling을 하는 실습을 할 건데 이것은 현재 포스팅 시점 기준 webpack 버전 v5.64.1의 예제입니다.

우선 연습용 프로젝트 폴더를 하나 생성하고 터미널을 켜서 프로젝트 폴더 경로로 이동한 후 다음 명령어를 실행하여 package.json을 생성합니다.

npm init -y

그리고 프로젝트 폴더에서 다음과 같은 디렉토리 구조로 html, js파일들을 생성합니다.

package.json
public
ㄴindex.html
src
ㄴjs
  ㄴindex.js
  ㄴmodules
    ㄴmoduleA.js
    ㄴmoduleB.js

총 다음 5개의 파일이 생성되었습니다.

package.json

public/index.html

src/js/index.js

src/js/modules/moduleA.js

src/js/modules/moduleB.js

각 파일별로 다음 코드를 작성합니다.

* 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>
</body>

</html>

* index.js

import moduleA from "./modules/moduleA.js";

moduleA();

* moduleA.js

import moduleB from "./moduleB.js";

export default function moduleA() {
  console.log("run module A !");
  moduleB();
};

* moduleB.js

export default function moduleB() {
  console.log("run module B !");
};

index.html을 보면 어떠한 js파일도 import를 하고 있지 않습니다.

그리고 각 js파일들은 index.js -> moduleA.js -> moduleB.js 순으로 의존관계를 맺고 있습니다.

이것을 하나의 js파일로 번들링을 하고, index.html에서는 이 번들링 된 파일을 script태그로 불러오는 것을 모두 자동으로 할 수 있도록 webpack 세팅을 할 것입니다.

webpack 설치 및 js파일 빌드 세팅

이제 터미널로 이 프로젝트에 개발 의존 모듈로 웹팩을 설치합니다.

yarn add -D webpack webpack-cli

그리고 프로젝트 루트 디렉토리에 웹팩 설정 파일을 만듭니다.

* webpack.config.js

const path = require("path");

module.exports = {
  entry: {
    index: "./src/js/index.js",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js",
    clean: true,
  },
};

entry는 모듈 진입점을 의미합니다. src/js/index.js 파일을 진입점으로 잡았습니다.

output은 번들링 된 파일에 대한 설정입니다.

path는 경로 설정입니다. dist폴더에 번들링 된 파일들을 생성할 것입니다.

filename은 번들링된 파일명입니다.

clean은 매 번들링 전에 (path에서 설정한) dist디렉토리를 청소할 것인지 여부입니다. 더 이상 사용하지 않을 파일들을 제거하기에 유용한 설정입니다.

웹팩 번들러 설정을 했으니 번들링을 실행할 스크립트 명령어를 만듭니다.

* package.json

{
  "scripts": {
    "build": "webpack --mode=development --config ./webpack.config",
  },
}

--mode는 개발 모드와 프로덕션 모드를 설정할 수 있습니다. 저희는 개발 모드로 하겠습니다.

--config는 webpack configuration 파일이 위치한 경로를 설정합니다.

이제 터미널에서 package.json에서 만든 명령어를 실행해봅니다.

yarn build

실행 결과, dist폴더가 생성되고 그 안에 index.bundle.js가 생성되었으면 제대로 번들링이 된 것입니다.

index.bundle.js는 index.js를 진입점으로 잡아 의존관계에 있는 모든 모듈들을 하나로 합친 파일입니다.

index.html 빌드 세팅

웹팩 번들링을 실행할 때, 번들된 js파일을 불러오는 index.html을 dist에 생성하는 세팅을 하겠습니다.

플러그인이 하나 필요하므로 터미널에서 플러그인을 개발 의존 모듈로 설치해줍니다.

yarn add -D html-webpack-plugin

다음 configuration을 수정합니다.

* webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: {
    index: "./src/js/index.js",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js",
    clean: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
  ],
};

plugins를 추가했습니다. 이제 build를 하면 public/index.html을 템플릿으로 하여 번들링 한 js파일을 import 하는 script태그를 추가한 index.html을 dist폴더에 생성할 것입니다.

터미널에서 다시 빌드를 실행해봅니다.

yarn build

dist폴더에 index.html과 index.bundle.js가 생성되었으면 성공한 것입니다.

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

Javascript 모듈 다루기, 그리고 webpack으로 bundling하기