[Webpack] webpack.config.js, 웹팩 주요 속성 5가지(entry/output/loader/plugins/mode)

웹팩 주요 속성 5가지에 대해서 알아보도록 합시다.

 

Webpack 이란?

반응형

webpack

 

Webpack은 모듈 번들러로, 웹 애플리케이션에서 필요한 여러 모듈을 하나의 파일로 번들링 하여 사용할 수 있도록 도와주는 도구입니다. Webpack을 사용하면 JavaScript, CSS, 이미지 등 다양한 파일을 하나의 번들 파일로 변환할 수 있습니다.

주요 속성으로는 entry, output, loaders, plugins, mode 등이 있습니다. 이를 조합하여 원하는 번들링 설정을 만들 수 있습니다.

웹팩을 사용하는 주된 이유로 간단히 말씀드리자면, 여러 가지 파일을 하나로 병합하기 때문에 http 요청 수를 감소시켜 저속의 네트워크 환경에서도 웹사이트 로딩 속도를 최적화할 수 있는 장점이 있다는 것입니다.

 

 

 

webpack.config.js 예시

아래의 webpack.config.js 파일을 많이 보셨을 겁니다.

package.json의 build 속성 내에 정의하기엔 너무 길고 가독성에 좋지 않기 때문에 이렇게 별도의 webpack.config.js 파일을 만들어 설정을 관리하는 것이 좋습니다.

지금부터 webpack.config.js에 쓰인 각 속성이 어떤 역할을 하는지 알아봅시다.

/* webpack.confign.js */

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
    }),
    new MiniCssExtractPlugin({
      filename: 'main.css',
    }),
  ],
  mode: 'production',
};

 

1. entry

번들링을 시작할 파일을 지정하는 속성입니다. 진입점이라고 보시면 됩니다.

/* webpack.confign.js */

...

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

};

 

 

2. output

번들링된 파일의 이름과 경로를 지정하는 속성입니다. 결과물이라고 보시면 됩니다.

/* webpack.confign.js */

const path = require('path');
...

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

• filename:  번들링된 파일의 이름을 지정합니다.
• path: node의 path 모듈을 가져와 문자열이 아닌, 경로를 잡아주는 api를 사용했습니다. 디렉터리 dist에 번들링된 파일이 생성됩니다.

 

3. loaders

Webpack이 모듈을 어떻게 처리할지를 정의합니다. Webpack은 기본적으로 JavaScript 파일만 이해할 수 있으므로, 로더(loader)를 사용하여 JavaScript, CSS, 이미지 등의 파일을 Webpack이 이해할 수 있는 형식으로 변환해야 합니다. 예를 들어, JavaScript 파일을 읽어서 ES5 문법으로 변환하거나, CSS 파일을 읽어서 스타일 시트로 변환하는 등의 작업을 수행합니다.

 

/* webpack.confign.js */

...
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
	...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      }
    ],
  },
  ...
};

module > rules에 loader 규칙을 정의합니다. 

• test: .js 확장자로 해석합니다.
• exclude: node_modules 디렉터리를 제외합니다.
• use
  • babel: babel-loader를 사용합니다.
  • options: @babel/preset-env 프리셋을 적용합니다. 이 프리셋은 ES6+ 코드를 ES5 코드로 변환하여 모든 브라우저에서 실행 가능하게 합니다.
    

• test: .scss 확장자로 해석합니다.
• use : 
  
  • style-loader는 head 태그 안에 인라인 스타일로 html 파일에 넣어줍니다.
  • css-loader는 javascript 파일에서 css를 해석해 줍니다.
  • 오른쪽부터 컴파일되므로 적용순서 또한 매우 중요합니다.

4. plugins

Webpack에서 추가적인 기능을 제공하는 플러그인을 지정합니다. 

/* webpack.confign.js */

...
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  ...
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
    }),
    new MiniCssExtractPlugin({
      filename: 'main.css',
    }),
  ],
};

우선, 추가적인 기능을 제공하는 플러그인(html-webpack-plugin, mini-css-extract-plugin)을 불러옵니다.

 

HtmlWebpackPlugin은 Webpack에서 HTML 파일을 자동으로 생성해 주는 플러그인 중 하나입니다. 이 플러그인을 사용하면 번들링 된 JavaScript 파일이 자동으로 HTML 파일에 추가되어 <script> 태그를 작성하지 않아도 됩니다.

• template: 기반 HTML 파일을 지정합니다.
• filename: 생성된 파일의 이름을 지정합니다.

 

MiniCssExtractPlugin은 Webpack에서 CSS 파일을 추출하여 별도의 파일로 생성해 주는 플러그인 중 하나입니다. 또한, 추출된 CSS 파일의 이름을 지정할 수 있습니다.

• filename: 생성된 파일의 이름을 지정합니다.

5. mode

Webpack이 실행되는 모드를 지정합니다. none, development, production이 있으며, 각각 다른 옵션을 제공합니다. development(개발 모드)에서는 번들 파일의 크기가 크지만, 디버깅이 쉽고 빠르게 빌드할 수 있어서 개발용으로 사용합니다. 반면, production(프로덕션 모드)에서는 번들 파일의 크기가 작아지며 최적화된 결과물이 생성되기 때문에 배포용으로 사용합니다.

/* webpack.confign.js */

...

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

• mode: Webpack이 실행되는 모드를 지정합니다.

 

 

 

 

이렇게 웹팩 주요 속성 5가지에 대해서 알아보았습니다.