minguri brain is busy

프론트엔드 개발환경의 이해: 웹팩(기본) - 1 본문

FE/개발환경

프론트엔드 개발환경의 이해: 웹팩(기본) - 1

minguri.k 2022. 8. 10. 21:18
반응형
웹팩을 설정해서 프로젝트를 다루고 있지만 빌드할 때 새로운 문제에 직면하면 원인을 예측하기 어려워 해결하는 데에 시간이 많이 들곤 했다. 프론트엔드 빌드 시스템에 대해 처음부터 정리하고 싶어서 김정한님의 '프론트엔드 개발환경의 이해와 실습' 강의를 들으며 주요 개념을 익혀보기로 했다.

 

시리즈 이전글

 

배경

src/math.js:

function sum(a, b) {
  return a + b;
}

src/app.js:

console.log(sum(1, 2)); // 3

index.html:

<!DOCTYPE html>
<html lang="en">
 ...
  <body>
    <script src="src/math.js"></script>
    <script src="src/app.js"></script>
  </body>
</html>

 

math.js가 로딩되면 app.js는 이름 공간에서 sum을 찾은 뒤 이 함수를 실행한다. 문제는 전역 scope가 오염될 수 있다는 점이다.

sum이 전역 공간에 노출되어서 다른 파일에서도 sum이란 이름을 사용하면 충돌하게 된다. 어플리케이션이 예측할 수 없게 되고 런타임 에러가 발생하기 쉽다.

 

IIFE 방식의 모듈

즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression): 함수를 정의하자마자 실행함

함수 스코프를 만들어 격리하면 자신만의 이름 공간이 존재하므로 이름 충돌을 막을 수 있다.

src/math.js:

var math = math || {}; // 'math' 네임스페이스

(function () {
  function sum(a, b) {
    return a + b;
  }

  math.sum = sum; // 외부에서 접근 가능하도록 네임스페이스에 추가
})();

src/app.js:

console.log(math.sum(1, 2));

 

다양한 모듈 스펙

이러한 방식으로 자바스크립트 모듈을 구현하는 대표적인 명세가 AMD와 CommonJS이다.

- CommonJs: exports 키워드로 모듈을 만들고 require() 함수로 불러들이는 방식이다. 대표적으로 서버 사이드 플랫폼인 Node.js에서 사용한다.

math.js:

exports function sum(a, b) {
 return a + b;
}

app.js:

const math = require("./math.js");
math.sum(1, 2);

- AMD(Asynchronous Module Definition): 브라우져와 같이 외부에서 자바스크립트를 로딩해야 하는 비동기 환경에서 AMD 스펙을 사용한다.

- UMD(Universal Module Definition): AMD 기반으로 CommonJS 방식까지 지원하는 통합 형태이다.

 

그 이후 ES2015에서 표준 모듈 시스템을 만들었고 현재는 바벨과 웹팩을 이용해 이 모듈 시스템을 사용하는 것이 일반적이다.

 

- 표준 모듈 시스템:

math.js:

exports function sum(a, b) {
 return a + b;
}

app.js: 

export * as math from "./math.js"; 
// or export { sum } from "./math.js";

math.sun(1, 2); // 3

index.html:

<!DOCTYPE html>
<html lang="en">
  ...
  <body>
    <script type="module" src="src/app.js"></script>
  </body>
</html>

type="module"로 모듈 시스템을 사용한다고 명시해주고, app.js 내부에서 math.js를 불러오고 있기 때문에 app.js만 추가해준다.

이러한 모듈 시스템은 인터넷 익스플로러를 포함한 몇몇 브라우저에서는 사용하지 못한다. 브라우저에 무관하게 사용하고 싶을 때 웹팩을 사용한다.

 

📦웹팩(Webpack) - 엔트리/아웃풋

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

 

webpack과 webpack-cli를 설치한다. 강사님의 버전에 맞춰 webpack 4 버전을 설치했다.

$ npm install -D webpack@4 webpack-cli

--mode, --entry, --output-path 세개의 옵션으로 코드를 묶을 수 있다.

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

- --mode: 웹팩 실행 모드

- --entry: 시작점 경로 지정 옵션

- --output-path: 번들링 결과물 위치할 경로

위 명령어를 실행하면 dist/main.js에 번들된 결과가 저장된다.

 

index.html:

<script src="dist/main.js"></script>

 

또한 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',
  },
};

npm 커스텀 명령어로 웹팩을 쉽게 실행할 수 있다. 아래 스크립트 코드를 넣어주면 npm run build로 웹팩 작업을 지시할 수 있다.

package.json:

{
  "scripts": {
    "build": "./node_modules/.bin/webpack"
  }
}

 

 

 

반응형

'FE > 개발환경' 카테고리의 다른 글

AWS ECS에 Next.js 애플리케이션 스테이징으로 배포 시 환경 변수 구성하기  (0) 2023.11.28
프론트엔드 개발환경의 이해: NPM  (0) 2022.07.31
'FE/개발환경' Related Articles more
Comments