[Webpack] 웹팩의 주요 속성 (Entry, Output, Loaders, Plugins, Mode)

 

 

 

🌈 웹팩(Webpack) 의 주요 속성

 

웹팩의 빌드(파일 변환) 과정을 이해하기 위해서는 아래 다섯 가지 주요 속성에 대해서 알고 있어야 한다.

 

• Entry : 웹 자원의 변환을 위한 진입점(→ 자바스크립트 파일의 경로)
• Output : 웹팩의 번들링된 결과물이 위치하게 될 파일의 경로
• Ioader : 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 것들을 변환할 수 있도록 도와주는 속성
• Plugin : 웹팩의 기본 동작에 추가적인 기능을 제공하는 속성
• Mode : 웹팩의 실행 방법을 결정하는 속성

 

 

 

 

0️⃣ webpack.config.js

webpack.config.js 은 Webpack이 실행될 때 참조하는 설정 파일이다.

 

사실 웹팩을 사용할 때 설정 파일이 반드시 필요한것은 아니다.

하지만, 설정 파일이 없는 경우에는 웹팩 커맨드를 실행할 때 마다 필요한 옵션을 붙여야한다.

 

따라서 설정 파일을 미리 정의하여 저장소에 올려두면 이러한 과정을 건너 뛸 수 있고,

같은 설정파일을 공유하므로 협업에도 용이하기 때문에 대부분의 경우에는 설정 파일을 사용한다.

const path = require("path")

module.exports = {
  mode: "development",
  entry: {
    main: "./src/app.js",
  },
  output: {
    filename: "[name].js",
    path: path.resolve("./dist"),
  },
}

 

 

 

 

1️⃣ Entry

웹팩은 여러개의 파일을 하나로 만들어주는 번들러이기 때문에 다른 모듈을 사용하고 있는 최상위 자바스크립트 파일이 어디에 있는지 알아야 한다. 이러한 경로를 알려주는 속성이 Entry이다.

 

 

따라서 웹팩은 Entry 속성에 명시된 파일을 기준으로 종속성 그래프를 만들어 하나의 번들 파일을 만들낸다. 

 

• Entry는 웹팩이 빌드할 파일의 시작 위치를 나타낸다.
• Entry의 경로부터 Import되어 있는 다른 모듈과 라이브러리에 대한 의존성을 찾는다.
• Entry의 기본값은 ./src/index.js 이다.

module.exports = {
  entry: ' ./src/index.js'
};

/* Entry 포인트는 여러개일 수 있다. */
module.exports = {
  entry: {
    login: './src/LoginView.js',
    main: './src/MainView.js'
  }
};

 

 

 

 

2️⃣ Output

Output은 웹팩에 의해 생성되는 번들을 내보낼 위치와 파일의 이름을 지정한다.

 

Entry와 비교하여 주의할점이 있는데 Entry의 경로는 프로젝트 디렉터리 내부이기 때문에 상대 경로이지만,

Output 의 경로는 프로젝트 디렉터리 내부라는 보장이 없으므로 절대 경로로 설정한다는 점이다.

 

• output은 웹팩에 의해 생성되는 번들을 내보낼 위치와 파일의 이름을 지정한다.
• output의 기본값은 ./dist/main.js 이다.

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  }
};

 

 

 

 

3️⃣ Loader

웹팩은 자바스크립트 뿐만 아니라, Loader를 이용하여 CSS나 이미지, 웹폰트, JSX, VUE 등 다양한 종류의 파일을 함께 번들링할 수 있다. 

 

• loaders를 통해 자바스크립트 파일이 아닌 파일들도 유효한 모듈로 변환시켜준다.
• loaders의 설정은 싱글 모듈에 대한 rules 프로퍼티를 정의해야 하며, rules 프로퍼티는 test와 use를 필수 프로퍼티로 가지고 있다.
• test 프로퍼티는 변환해야하는 파일 또는 파일들을 식별하는 역할을 한다.
• use 프로퍼티는 변환되어야 하는 파일에 대하여 어떤 로더를 사용해야하는지에 대한 설정이다.

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

 

 

 

 

4️⃣ Plugin

Plugin을 통해서 Loader로 설정하기에는 애매한 부분들을 커버할 수 있다.

예를들어, 웹팩을 실행할 때 기존에 있던 번들 파일을 지우고 싶은 경우에는 clean-webpack-plugin 플러그인을 사용할 수 있다.

• Loader가 파일단위로 처리하는 반면 Plugin은 번들된 결과물을 처리한다.
• 번들된 자바스크립트를 난독화 하거나 특정 텍스트를 추출하는 용도로 사용할 수 있다.

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

module.exports = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

 

 

 

 

5️⃣ Mode

웹팩 버전 4부터 Mode라는 개념이 추가되었다.

Mode를 통해 웹팩을 빌드할 때 "어떻게 빌드할것인가?" 에 대한 방식을 설정할 수 있다.

 

• mode는 웹팩을 세팅함에 있어서 development, production, none 중 하나를 파라미터로 사용한다.
• production은 배포를 위한 빌드로 코드가 최적화되어 파일의 크기가 최소화되어 빌드된다.
• development는 개발을 위한 빌드로 빠르게 빌드된다.
• none은 기본 최적화 옵션을 해제하여 빌드된다.
• mode의 기본값은 production이다.

module.exports = {
  mode: 'production'
};

 

 

 

 

 

 

 

 

📌 참고사이트

▪ 웹팩 핸드북

▪ https://ingg.dev/webpack/