FE 주말 스터디 [1] : Webpack

Universe·2023년 2월 18일

webpack

FE주말스터디

목록 보기

1/1

프론트엔드 스터디

오늘 공부한 내용 : Webpack 이 뭘까요 ?.?

공부를 위해 참고한 내용 : 공식문서

그래서 Webpack이 뭔데 ?

자바스크립트 모듈을 컴파일할 때 사용된다. 정적 모듈 번들러 라고 한다.

4.0.0 버전 이후로는 번들링을 하기위한 설정 파일을 필요로 하지 않는다 !

필요하다면 만들어서 설정할 수 있다.

Webpack 의 핵심개념은 다음과 같다.

1. Entry

엔트리 포인트는 웹팩이 내부의 모듈간의 의존성 관계를 파악하여 그래프를

생성(디펜덴시 그래프)하기 위해 사용해야 하는 모듈이다. 의존하는 다른 모듈과 라이브러리를 찾아낸다.

2. Output

생선된 번들을 내보낼 위치와 이 파일의 이름을 지정할 수 있다.

기본적으로는 ./dist/main.js 로, 생성된 기타 파일의 경우에는 ./dist 폴더로 설정된다.

3. Loaders

webpack은 기본적으로 JS와 JSON 파일만 이해하는데 로더를 사용해 다른 유형의 파일을 유효한 모듈로 전환해 디펜덴시 그래프에 추가한다. rules 옵션으로 규칙을 정할 수 있다.

4. Plugins

플러그인을 활용하면 번들을 최적화 하거나, 에셋을 관리하거나, 환경변수를 주입하는 등 의 작업을 할 수 있다.

5. Mode

웹팩의 Mode 옵션은 development, production 이 있으며 기본값은 production.

6. Browser Compatibility

구형 브라우저를 위한 polyfill을 로드하는 역할들 한다.

기본적으로 ES5가 호환되는 모든 브라우저를 지원하지만 그 이하의 브라우저에서는 작동하지 않을 수 있으므로 폴리필을 추가하는 것.

실습하기

npm init -y
npm i webpack webpack-cli --save-dev

디렉토리를 성정하고 npm을 초기화한 후 webpack 을 로컬로 설치하는 단계.

sebpack-cli를 설치하면 커멘드 라인에서 webpack을 실행할 수 있다.

// 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>
    <script src="https://unpkg.com/lodash@4.17.20" />
    <script src="./src/index.js" />
  </head>
  <body></body>
</html>

// index.js
const component= () => {
  return (document.createElement("div").innerHTML = _.join(
	// 새로운 div 엘리먼트 생성
    ["hello", "webpack"],
    " "
	// _.join 메소드를 사용해 hello webpack 문자열 생성
	// innerHTML 메소드로 div 엘리먼트 안에 hello webpack 문자열 추가 후 return
  ));
};

실습에 사용하기 위해 lodash script 를 import 해주었다.

또한 component 함수를 하나 만들어주었다.

~~공식 문서와는 조금 다르지만, 단순하게 컴포넌트를 반환하는 함수라고 생각해~~

~~임시변수를 제거하고 하나의 리턴문으로 리펙토링했다.~~

이 함수의 리턴값은 HTML element가 아니다!

(document.createElement("div").innerHTML = _.join(["Hello", "webpack"], " "))

의 반환값은 ‘innerHTML’ 속성에 할당된 값인 “Hello Webpack” 을 반환한다.

난 바보야 😢

공식 문서에 있는 함수로 다시 수정했다.

가장 먼저 해야할 일 (Creating a Bundle)

디렉토리 구조를 수정한다.

그러니까 배포 코드와 소스 코드를 분리하는 작업을 한다.

소스코드는 작성하고 편집하는 코드이며

빌드코드는 빌드 과정을 통해 최소화 하고 최적화된 브라우저에서 로드 될 코드이다.

현재의 디렉토리

webpack-practice
  |- package.json
  |- package-lock.json
  |- index.html
  |- /src
    |- index.js

에서

webpack-demo
  |- package.json
  |- package-lock.json
  |- /dist      // 추가된 디렉토리
	  |- index.html
  |- index.html
  |- /src
    |- index.js

dist 디렉토리를 추가했다.

자동으로 생성할 수 있는 방법은 추후에 학습할 예정.

npm i --save lodash

//index.js
import _ from 'lodash'
...

document.body.appendChild(component())

// dist/index.html
...
<body>
	<script src="main.js"/>
</body>

연습을 위해 lodash 라이브러리도 새로 설치했다.

해당 메소드를 이용하기 위해 import 했으며,

배포코드의 index.html에 main.js 를 추가했다.

이제 npx webpack 을 하면 main.js 가 추가된다.

생성된 LICENSE 파일은 webpack 에서 코드 최적화를 위해 코드 스플리팅을 적용했을 때, 분리된 모듈에 대한 라이선스 정보를 담고 있다고 한다. 개발모드에서는 생성되지 않는다.

dist 의 index.html 파일을 열어보면

귀여운 Hello Webpack 문구가 나온다.

설정을 더하기(Using a Configuration)

webpack 명령어를 수동으로 설정할 수 있는 방법.

webpack 의 4.0.0 버전 이후부터는 설정파일이 필요하지 않지만

섬세하게 다루어주기 위해서는 설정파일이 필요하다.

// webpack.config.js

const path = require("path");

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

node js 를 배울 때가 새록새록 떠오르는 코드.

먼저, mode 를 development 로 바꾸어 줬다.

아까부터,

이런 WARNING이 계속 떠서 불편했는데, config 파일에서 mode 를 설정해 달라는 문구였다.

또한 entry point 를 src의 index.js 로, output point를 dist의 main.js 로 설정했다.

다음으로 package.json 에서

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
   },

스크립트 항목을 이런식으로 바꿔주면

npm run build 명령어로 webpack 을 빌드할 수 있다.

잘 되는 모습 !

지금까지가 webpack 을 기본적으로 설정하는 방법이다.

Asset Management

Asset 은 리액트 폴더구조에서도 자주 썼는데, 이미지나 폰트 같은 정적인 파일들을 담아뒀던 것 같다.

공식문서에서는 css 파일이나 이미지로 설명하고 있다.

기존 프로젝트를 조금 변경했다.

// index.html
...
<body>
	<script src="bundle.js" />
</body>

// webpack.config.js
...
output: {
	filename: 'bundle.js'
}

단순하게 output point를 bundle.js 로 변경.

그 뒤에 JS 모듈에서 CSS 파일을 import 하기 위해

npm install --save-dev style-loader css-loader

style-loader 와 css-loader 라는 라는 라이브러리를 사용했다.

그리고 webpack.config.js 에 module 을 추가한다.

module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },

webpack 은 정규표현식을 이용해 어떤 파일을 찾아 특정 loader 에 전달하는지 알아낼 수 있다.

.css 의 확장자를 가진 모든 파일을 style-loader, css-loader loader에 연결하여 처리.

use 내부의 loader 순서 컨벤션을 반드시 지켜야 한다고 한다.

use 속성은 로더의 실행 순서를 나타내는데 배열의 가장 마지막 요소부터 첫번째 요소까지 실행이 된다.

그런데 style-loader가 css-loader에서 생성된 JS 모듈을 해석하여 스타일을 적용하기 때문에 순서를 반대로 적용하면 원하는 스타일이 적용되지 않을 수도 있다는 것이다.

// src/style.css

.hello {
	color:red;
}

// src/index.js

import './style.css'

...
element.innerHTML = _.join(['Hello','webpack'], ' ');
element.classList.add('hello');
...

src 디렉토리에 style.css 파일을 하나 만들어 hello 클래스를 가진 요소의 color를 red로 바꿔주었다.

js 파일에서 import 해서 classList로 추가해준 모습.

이후 build 하면

빌드된 파일을 열어보면 head 태그에 style 이 적용되어 있다.

귀여운 글자도 빨갛게 잘 익은 모습.

이미지는요? 폰트는요? 파일은요?

webpack.config.js 파일의 module에 알맞은 형식의 모듈을 추가하면 된다.

{
  test: /\.(png|svg|jpg|jpeg|gif)$/i,
  type: 'asset/resource',
},

{
  test: /\.(woff|woff2|eot|ttf|otf)$/i,
  type: 'asset/resource',
},
{
  test: /\.xml$/i,
  use: ['xml-loader'],
},

data asset, 예를들어 JSON, CSV 같은 형식의 데이터는 추가적인 loader를 설치해주어야 한다.

npm install --save-dev csv-loader xml-loader

추가적으로 JSON 파일 같은 형식을 관리하는 방법도 소개하고 있지만 필요할 때 찾아보는 것이 좋겠다.

Asset Management

끝으로

웹팩을 이용한 코드스플리팅이나 트리쉐이킹을 공부해보고 싶었는데
기본적으로 알아야 할 내용이 상당히 많았다.
CRA에서 build를 자동으로 해주니까 이렇게 번거로운 작업인줄 몰랐고..
package.json 이 어떤 역할을 해주는지 모르니까
설치된 라이브러리 확인할 때 빼고는 건드려 본 적이 없는데
이런 것도 설정할 수 있구나- 하고 재밌게 공부했다 !
🥰

Universe

Always, we are friend 🧡

FE 주말 스터디 [1] : Webpack