webpack 학습해서 JavaScript 프로젝트에 적용하기 (+개발서버 설정)

webpack 5 기준으로 학습, 적용한 포스팅입니다. 

 

webpack 공식문서를 읽고, 간단한 예제를 따라해본 뒤

제 Vanilla JavaScript 프로젝트에 적용해보도록 하겠습니다. 

---

0. webpack

모던 js 어플리케이션을 위한 static module bundler 

원리: entry point에서 시작해 내부적으로 dependency graph를 만들고, 이를 파악해 필요한 내용만 가져와서 하나의 번들을 만든다. 

- dependency graph: 애플리케이션의 모든 모듈 간의 의존관계를 나타냄 

 

 

 

1. webpack setting 

1) 필요한 모듈 다운

webpack, webpack-cli 

 

2) 디렉토리 구조 설정

- dist, src 폴더 만들기 

- dist 폴더 안에 index.html 생성

- src 폴더 안에 main.js 생성

- dist 폴더 안 index.html에 scipt 태그 src 속성에 main.js로 설정

왜 dist폴더 안 index.html에 script 태그 src 속성을 main.js로 설정할까? 
webpack 설정파일로 따로 설정하지않으면,
webpack은 src폴더의 main.js를 읽고 하나의 번들 js 파일을 main.js 파일명으로 dist 폴더 내에 생성합니다.
즉, 번들링된 js 파일이 dist/main.js로 만들지고, 이를 사용하기위해 src에 연결해줍니다. 

 

3) webpack 명령어 실행 

npx webpack

 

 

Q. 여기서 의문점이 들죠.. webpack 설정 안해도 되나요?

A. webpack 4부터는 configuration 없이 사용할 수 있습니다 

공식문서에서도 아래와 같이 적혀있습니다. 

As of version 4, webpack doesn't require any configuration, but most projects will need a more complex setup, which is why webpack supports a configuration file. 

 

 

물론, 더 세밀하게 세팅하기위해 configuration file 지원합니다.

그래서 webpack.config.js 파일을 이용해 추가 설정을 할 수 있습니다. 

 

 

2. webpack.config.js 

- 위에서 했던 얘기지만 한번 더 정리하자면, entry point가 기본적으로 src/index.js -> 이걸 dist/main.js에 minified, optimized해서 production시 사용합니다. webpack.config.js를 할 때 저런 기본적인 규칙에, 설정 파일에 있는 걸 확장해서 사용합니다. 

 

생성하는 방법은, 2가지가 있습니다. 

1) npx webpack init 명령어

질문을 통해 webpack configuration files를 빠르게 생성해줍니다. 

 

2) 직접 만들기 

webpack.config.js 파일을 만들고, 필요한 설정을 작성하면 됩니다. 

reference

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); //to access built-in plugins


module.exports = {
  entry: './path/to/my/entry/file.js', 
  // entry: 진입점. dependency graph를 만드는 시작점이 어딘지 나타냄 (default: ./src/indexjs) 
 
  output: {
    path: path.resolve(__dirname, 'dist'), // 파일위치
    filename: 'my-first-webpack.bundle.js', // 파일이름 
  },
  // output: webpack이 생성한 번들파일이름, 위치 지정 (default: ./dist/main.js)  
  
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
  /* loader: webpack은 js, json파일만 이해할 수 있음. 다른 유형의 파일을 처리하고자 유효한 모듈로 변환해 dependency graph에 추가함
  	 1) test: 변환할 파일 체크
  	 2) use: 변환 시 사용할 로더 
  */ 

  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
  /* plugins: 번들 최적화, asset 관리, 환경변수 관리 등의 작업을 처리함 
  	 - require() 플러그인을 받아와야하고, array에 추가함 
     - HtmlWebpackPlugin: 어플리케이션의 HTML파일 생성해, 번들에 삽입시켜줌 
  */ 
  
  mode: 'production', 
  // development, production(default), none 선택 가능
  // cli에서 --mode production로 해도 됨
};

webpack.config.js 실행명령어

webpack --mode=development --config ./webpack.config

---

(기타) 개발서버 세팅방법

1. webpack-dev-server 모듈 설치 

2. webpack.config.js 설정 

const path = require("path");

module.exports = {
  ...
  devServer: {
    static: {
      directory: path.resolve(__dirname, "dist"), 
      // 번들링된 결과물이 저장되는 빌드폴더  
    },
    port: 3000,
  },
};

 

3. 개발서버 켜기 

webpack serve --open --mode=development --hot

개발서버가 열리고, hello webpack 잘보인다

 

---

 

자, 이제 webpack을 공부했으니 실제 js 프로젝트에 적용해보겠습니다. 

3 step으로 끝내봅시다! 

 

 

stpe1.

webpack, webpack-cli, webpack-dev-server 설치 

 

stpe2.

dist 폴더로 index.html을 옮기고, webpack.config.js 파일 세팅 

 

stpe3.

개발서버 켜면 성공인데..흰 창이 보이네요 ~~ 해결해봅시다! 

3-1. 404에러

파일이 없다는 에러네요. dist/index.html에 연결할 script src를 번들로 만들어진 파일 src로 바꾸지 않아서 발생했습니다. 

왜? 번들된 js 파일을 읽어야하니까, webpack.config.js에서 정한 번들된 js 파일명으로 바꾸면 해결..일줄 알았는데 

 

3-2. 다른 에러 

dom에 접근한 변수가 null로 뜨고있어서 dom이 그려지기 전 js가 실행되는 거 아닐까? 라고 생각했고, 

script defer를 적용해 dom 생성 후 실행될 수 있도록 적용하니까 해결 !!

번들파일도 script태그의 지연 실행이 필요하단 걸 알게됐습니다. 
(뭔가 번들과정을 거치니까 지연되지 않을까?라고 생각했었는데, 빌드 시 번들되고나서 원래 알던 dom 트리 생성, script만나면 js 트리 생성하는 과정은 똑같다는 걸 알게됨) 

 

그래서 번들링 적용 전/후, 어떤 차이가 있었을까요? 

1. request 요청 횟수 감소 (17회 -> 1회) *17은 프로젝트에서 사용하는 모듈 개수

2. DOMContentLoaded, Load 5초 감소 (10초 -> 5초) 

왼쪽이 번들링 적용 전, 오른쪽 후

---

 

궁금한 것이자 추가로 할 것들 

- 네트워크 탭에 보면, 번들파일이 캐싱이 되어있던데 자동으로 캐싱이 되는건지? 조절할 수 있는건지, 어떤 원리로 되는건지 (etag 속성이 있어서 이걸 사용해서 되는 거 같음) 

- 해당 js프로젝트에 스타일, 이미지를 적용해서 웹팩 공식문서에 asset management 읽은 뒤 적용해보기 

 

 

webpack 기본설정 + 개발서버 세팅한 소스코드 

GitHub - live-small/bundler: study javascript bundler

- 빌드하고싶으면 npm run build

- 개발서버 켜고싶으면 npm run start

명령어를 입력해주시면 됩니다. 

 

 

프로젝트 적용한 소스코드 

GitHub - live-small/javascript-vendingmachine: [Vanilla JS] 자판기 프로그램

 

---

내용 중, 잘못된 부분이 있다면 편하게 말씀해주세요

감사합니다.

 

 

---

참고자료

Getting Started | webpack

webpack-dev-server로 프론트엔드 개발 서버 띄우기