Webpack이란? Webpack 개념, 주요요소(Entry, Output, Loader, Plugin)

Webpack 이란?

- webpack이란 모듈 번들러이다.

- 웹사이트 상의 모든 리소스를 하나의 js 파일로 만들어준다.

왜 Webpack이 필요할까? (Webpack의 등장)

자바스크립트 코드가 많아지면 많아질수록 하나의 파일로 관리하는 것은 점점 힘들어지기 시작했습니다. 여러 파일로 나눠서 로딩할 수도 있겠지만 그러면 그만큼의 네트워크 비용문제가 생기고, 각 파일내에서의 스코프 침범이 일어나는 문제들이 생겼습니다. 

• 함수 스코프를 나눠 모듈시스템으로 관리할 수 있습니다, 하지만 브라우저 내에서 모듈 시스템을 사용하려면 IIFE(즉시실행함수) 로 변경해줘야하고, 네트워크 비용을 축소하기 위해 하나의 파일로 묶어주는 방법이 필요합니다.

웹 네트워크 상에서는 하나의 리소스를 요청하고, 요청을 끊습니다. 

이후 또다른 파일을 로드하기 위해 요청하고, 끊는 작업을 반복하는데, 이 과정에서 네트워크 비용이 늘어납니다. JS을 모듈화하고 CSS, IMG 파일들을 모두 합쳐서 JS로 묶어버리는 역할을 하는 번들러가 필요했고, webpack은 여러 번들러들 중 하나입니다. 

 

웹팩 동작

웹팩은 모듈 번들러입니다.

모듈내의 상호 의존성이 있는 파일들, 또는 모듈들을 사용해 하나의 파일로 읽어와 하나의 js 파일과, css, jpg, png 등등의 결과물로 벌들한 결과를 내 주는 것이 특징입니다.

 

Webpack의 주요 4요소

(Entry, Output, Loader, Plugin)

Entry 

웹팩은 여러 자바스크립트 모듈을 하나로 번들해냅니다. 다른 모듈들을 사용하고있는 최상위 파일을 설정해주는데, 이때 webpack에서  Entry 속성을 사용합니다. 

Entry 속성에 명시된 파일을 시작으로 의존성 트리를 만들며 번들파일을 만들어냅니다.

기본으로 "./src/index.js"가 설정됩니다. 쉬운 설정으로는 프로그램의 시작점이 되는 하나의 파일 를 적어 셋팅하는 것이 좋지만, 배열 또는 객체로 여러 파일을 entry속성에 넣어 유연한 설정도 가능합니다.  entry에 셋팅된 최상위 js를 타고 모듈들을 번들해 output설정에 명시된 filename으로 번들된 하나의 js파일이 만들어집니다.

 

- Webpack.config.js

// Single Entry
module.exports = {
  entry: "./src/index.js",
  output: {
    filename: '[name].bundle.js',
  },
};

// Multi Entry
module.exports = {
  entry: ['./src/file_1.js', './src/file_2.js'],
  output: {
    filename: '[name].bundle.js',
  },
};

 

Entry 내부의 의존성 작동

 

- /src/ index.js

import { func } from 'a.js'

func();

위 코드에서 라는 index.js 파이에서 a.js의 func라는 함수를 가져와 사용하고있습니다.

Entry에 셋팅된 src/index.js의 파일을 타고 들어가 a.js와 같은 의존성을 가지는 모듈을 참조해 코드를 output에 명시한 bundle.js로 합쳐줍니다.

 

Output

output옵션은 어떤 이름으로 인풋에 들어간 파일들이 번들되어 만들어질지를 정할 수 있습니다. 아웃풋의 filename의 기본 값으론 "./dist/main.js"가 설정되어있고, 설정하지 않으면 dist 폴더의 main.js파일로 생성됩니다.

 

앞으로 아래 plugin 섹션에서 여러 플러그인을 사용하면서 아웃풋에 간단히 번들될 파일명을 지정하는 것 뿐만 아닌 여러가지 옵션을 추가하게 될 것입니다. 개인적으로 많이 헷갈리기도 하고 해맸던 옴션인데 웹팩 커스터마이징 시리즈 목록을 작성해가며 풀어보겠습니다. 

 

// Output
module.exports = {
  entry: "./src/index.js",
  output: {
    filename: '[name].bundle.js',
  },
};

예제와 같이 설정된 경우, entry파일명을 추출해 index.bundle.js 로 파일이 번들되어 나옵니다.

 

더 많은 옵션을 보기 위해선 이 곳에서 아웃풋 옵션을 확인해주세요.

 

 

Loader와 Plugin

처음 웹팩을 배우는 사람들에게는 웹팩의 개념중에서 로더와 플러그인이라는 개념이 혼동될 수 있습니다.

둘의 공통점은 원본 코드에 무언가 실행시킨다는 것이지만 그 단위가 다릅니다. 웹팩은 여러 js파일들을 모아 하나의 번들된 js파일로 만들어줍니다. 이 과정에서 각 파일에 한번씩 모두 실행시키는 것이 Loader이고, 로더를 거쳐 번들된 파일 bundle.js에 딱 한번 적용시키는 것이 Plugin입니다. 이 내용을 아래 Loader와 Plugin섹션에서 좀 더 자세히 다뤄보도록 하겠습니다.

Loader

앞서 웹팩에 대해 이야기했습니다. 웹팩은 여러 js파일을 모아 하나로 번들해주는 번들러입니다.

하지만 웹에서는 js뿐만아니라 html, css, ts, png, jpg, svg...등등 자바스크립트가 아닌 여러 파일들을 내부에서 사용합니다. 자바스크립트가 아닌 이런 파일들을 웹팩이 읽어올 수 있도록 처리를 해줘야 하는데, 이걸 처리해주는 역할을 하는 게 Loader입니다. 각 형식에 따라 처리해주는 로더가 다르고 각 로더를 설치해 웹팩에 세팅해줍니다.

 

로더의 옵션에는 'test'와 'use'가 있습니다. 

test : js내부에 import되는 파일의 확장자를 정규식으로 추출합니다.

use: test에서 지정된 확장자에 적용할 로더를 지정합니다. 

 

로더는 module.rules에 배열 내 객체로 test,use 프로퍼티를 넣어 설정해줍니다. 아래 예시를 참고해주세요!

webpack.config.js에 설정했다고 하더라도 로더를 설치하지 않았다면 적용되지 않고 설치되지 않았다는 에러가 뜹니다. 먼저 설치를 했는지 확인해주세요. ex) npm install css-loader -D

 

webpack.config.js

const path = require('path');

module.exports = {
  output: {
    filename: 'bundle.js',
  },
  // 모듈 밑 rules에 객체 배열로 작성합니다.
  // test: 원하는 파일 확장자 추출 정규식
  // use: 사용하고자 하는 로더
  module: {
    rules: [
    	{ test: /\.css$/, use: 'css-loader' },
        { test: /\.png$/, use: 'file-loader' },
    ],
  },
};

 

Plugin

로더가 특정 파일들을 다른 형식으로 바꾸거나 특정 기능을 실행시키는 역할을 했다면, 플러그인은 특정파일보다는 더 큰 범위로 로더가 번들된 후에 실행됩니다. 예를들면 번들되어 나온 파일에 추가적인 코드를 주입시키거나 환경변수를 세팅하거나 최적화 작업을 합니다. 

 

플러그인을 사용하기 위해서는 webpack.config.js 상단에 require로 해당 모듈을 변수로 불러 plugins 배열에 추가해줘야 합니다. 플러그인을 여러 목적으로 여러번 생성해 사용할 수 있기 때문에 Plugins 배열 내부에 new생성자로 인스턴스를 생성해 사용한다고 합니다. 

 

대부분의 플러그인들은 내부에 커스텀으로 설정할 수 있는 옵션들이 있는데 각 플러그인별로 옵션들을 체크해 사용할 수 있습니다.

// html-webpack-plugin을 require로 불러옵니다.
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
  module: {
    rules: [
    	{ test: /\.css$/, use: 'css-loader' },
        { test: /\.png$/, use: 'file-loader' },
    ],
  },
  
  // plugins 배열에 사용하고자하는 플러그인을 new 생성자로 생성해 사용
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

위의 예시에서는 html-webpack-plugin을 사용하고 있는데 이플러그인은 자동으로 template 에 명시해준 경로 ./src/index.html에 index.html 를 생성해 주고 내부에 output에 설정된 번들된 파일 경로가 주입된다.