ch1. 프론트엔트의 시작, 웹팩

ch1. 프론트엔트의 시작, 웹팩
/category/Frontend%20Basics

2021. 6. 12. 13:55

본 포스팅에 쓰이는 Github 주소입니다. https://github.com/CheoljongPaek/Frontend-Basics/tree/main/about-webpack

CheoljongPaek/Frontend-Basics

Contribute to CheoljongPaek/Frontend-Basics development by creating an account on GitHub.

github.com

웹팩과 설정 방법

배울 내용

웹팩이란?
웹팩 설정

1. 웹팩이란?

효율성, 우리는 작업하는 프로젝트 내에서 최대한의 효율성을 올릴려고 노력한다.

우리는 특정 단어를 모를 때 그 단어를 대신할 다른 뭉텅이의 단어들을 섞어 표현한다. 사전적 의미에서 '정의'를 필자를 이렇게 생각한다. 웹팩은 어렵다. 우리는 웹팩을 모르고 그 정의를 모른다. 그러기에 우리는 앞으로는 더 효율적인 사람이 될 기회가 있다.

한 번쯤은 이미지는 스프라이트로 만들어 처리하고, .js파일과 .css파일을 하나로 합치는 번들러를 사용한 기억이 있는가?

우리는 파일의 요청은 하나가 끝나야 다음이 요청되기 때문에 조금 더 효율성을 향상시키려고 했을 것이다. 또한 필자는 가장 기본적인 html, css, javascript도 IE(인터넷 익스플로러)에 대응되도록 예전 문법을 쓰거나 특정 코드를 더 넣은 기억도 있다.

웹팩은 파일을 하나로 합쳐주면서, 크로스 브라우징에 대응하고, 압축도 하는 역할을 하는 모듈 번들러(Module Bundler)이다.

1-1. 모듈 번들러?

하나의 웹 애플리케이션은 html, css, javascript 등 여러 자원으로 구성된다. 모듈 번들러는 이 모든 자원을 각각의 모듈로 보고 조합해서 하나의 결과를 만든다.

1-2. 모듈?

// math.js
function sum(a, b) {
  return a + b;
}

function substract(a, b) {
  return a - b;
}

const pi = 3.14;

export { sum, substract, pi }

math.js 파일은 하나의 모듈이다. 이처럼 더하기, 빼기, 그리고 원주율 상수처럼 성격이 비슷한 기능들을 재사용 가능하게 하나의 파일로 관리하는 것이 모듈이다.

웹팩이라는 도구를 활용해 프론트엔드의 첫발을 내밀어보자.

2. 웹팩 설정

웹팩 실행 전 실습할 기본 파일 구조를 확인하겠다.

npm init 또는 기본 설정을 모두 yes로 하는 npm init -y을 터미널에서 실행시키면 package.json 파일이 생성된다.

아래의 package.json은 사용하고 있는 npm 패키지들을 관리하는 파일이다. 라이브러리나 프레임워크같이 무거운 파일들을 쉽게 공유하고 설치할 수 있게하는 목적을 가진다. 이렇게 npm 지역 설치에서는 배포용인 dependencies와 개발용인 devDependencies으로 구분해 설치한다.

(1) 화면 로직과 관련된 라이브러리인 jquery가 dependencies의 예시이다.

(2) devDependencies는 [webpack, eslint, limagein 등] 개발할 때만 사용하고 배포할 때는 없어도 되는 경우에 사용한다.

{
  "name": "ch1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "CJPaek",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.38.1",
    "webpack-cli": "^4.7.2"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

우리의 목표는 src/index.js 파일을 dist/main.js 파일로 모듈화시켜 웹 애플리케이션의 구성 요소로 만드는 것이다. 어떤 것을 변화시키기 위해서는 기준이 필요하고, 이 모듈화를 위한 기준은 webpack.config.js 설정 파일이다. 루트 디렉토리 ch1 밑에 webpack.config.js 파일을 만들고 다음과 같이 입력한다.

const path = require('path');

module.exports = {
  mode: 'none',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
}

◽mode

해당값에 따라 내부 최적화를 따른다. [development, production, none] 옵션이 있으며 최적화 옵션인 none 외에 개발과 배포 옵션은 process.env.NODE_ENV의 값을 옵션과 같게 설정한다.

◽entry

라이브러리 또는 모듈의 로딩을 시작할 지점이다. 우리는 먼저 ./src/index.js 파일을 로딩한다.

◽output

웹팩 빌드 완료 후 나온 파일의 경로와 파일명을 설정한다. 우리는 dist/main.js 파일을 생성하게 된다.

이제 아래의 html 파일을 살펴볼 차례이다.

<html>
  <head>
    <title>Webpack Demo</title>
    <!-- 첫번째 주석: <script src="https://unpkg.com/lodash@4.16.6"></script> -->
  </head>
  <body>
    <!-- 두번째 주석: <script src="./src/index.js"></script> -->
    <script src="./dist/main.js"></script>
  </body>
</html>

웹팩 사용 이전에는 웹 애플리케이션 실행시 첫번째 주석처럼 cdm 파일을 매번 요청하거나, 두번째 주석처럼 모듈화되지 않은 파일을 사용했다.

웹팩 사용 이후에는 ./src/index.js 파일이 아닌 자동으로 새로 생성된 ./dist/main.js 파일을 사용한다.

👏이제 답할 수 있어야 하는 것들

'Frontend Basics' 카테고리의 다른 글

json 파일의 날짜 데이터를 자바스크립트에서 사용하기. (1)	2021.08.13
ch2. Loader와 Plugins (1)	2021.06.15

철덩이의 자바스크립트

CATEGORIES