[웹해킹 기초] Webpack

Webpack 이란?

: 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)

모듈 번들러

웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미

 

웹팩에서의 모듈

자바스크립트 모듈에만 국한되지 않고 웹 애플리케이션을 구성하는 모든 자원을 의미한다. 웹 애플리케이션을 제작하려면 HTML, CSS, Javascript, Images, Font 등 많은 파일들이 필요하다. 이 파일 하나하나가 모두 모듈이다.

 

모듈 번들링

아래 그림과 같이 웹 애플리케이션을 구성하는 몇십, 몇백개의 자원들을 하나의 파일로 병합 및 압축 해주는 동작

▶ 빌드, 번들링, 변환이 모두 같은 지역 거주중

---

Webpack 등장 배경

1. 파일 단위의 자바스크립트 모듈 관리
2. 웹 개발 작업 자동화 도구 (Web Task Manager)
3. 웹 애플리케이션의 빠른 로딩 속도와 높은 성능

  

Webpack에서 해결하려는 문제

1. 자바스크립트 변수 유효 범위
2. 브라우저별 HTTP 요청 숫자의 제약
3. 사용하지 않는 코드의 관리
4. Dynamic Loading & Lazy Loading 미지원

 

---

Webpack 주요 속성

entry

: 웹팩으로 빌드할 대상 파일을 지정

entry: "./src/main.js",

 

output

: 빌드 결과물의 위치와 파일 이름 등 설정

output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/'
    filename: "build.js",
},

 

module

: html, css, 이미지 파일 등을 js로 변환하기 위한 Loader 설정

module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"], // css -> js 변환
      },
      {
        test: /\.vue$/,
        use: ["vue-loader"],  // vue -> js 변환
      },
      {
        test: /\.js$/,
        use: ["babel-loader"],  // ES6문법 -> 호환가능한 js 변환
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        use: ["file-loader"],  // 이미지파일 -> js파일로 변환
        options:{
        	name: '[name].[ext]?[hash]'
        }
      },
    ],
  },

 

plugin

: 빌드 결과물에 대한 추가 기능 적용(ex. 결과물 사이즈 줄이기, 기타 css,html 파일로 분리 등)

plugins: [new CleanWebpackPlugin("build.js")],

 

resolve

: 빌드 시 해당 파일이 어떻게 해석되는지 정의(라이브러리 버전, 파일 경로 등 지정)

resolve: {
  // 웹팩에서 모듈을 찾을 때 어떤 디렉토리를 찾을지 설정
  modules: [path.resolve(__dirname, 'src'), 'node_modules']
}

 

참고 자료
Vue.js 웹팩(webpack) 개념 및 설정
Webpack 기본 개념
Vue CLI로 생성한 프로젝트의 웹팩 설정 방법