[JavaScript] 모듈 번들러 webpack

웹팩 (webpack)

요즘 가장 인기있는 번들러로 세분화된 모듈 파일을 하나로 합쳐준다.
JavaScript외에도 HTML, CSS, jpg/png 등 다양한 파일 번들링이 가능하다.
네트워크 코스트를 줄여 웹 앱의 성능을 향상시켜주는 중요한 라이브러리다.
*같은 타입의 파일들을 묶어서 요청/응답 받기 때문

https://webpack.kr/

핵심개념 (!important)

1. Entry & Output

config 파일을 생성해 (touch webpack.config.js) 다음과 같이 정보를 설정해줄 수 있다

const path = require('path');

module.exports = {
  entry: './src/script.js', // 👈 번들링을 원하는 파일의 위치
  output: {
    path: path.resolve(__dirname, 'docs'), // 👈 번들을 내보낼 위치 (docs 폴더)
    filename: '[name].js', // 👈 파일 이름 지정 방법 (entry가 여러개면 key값이 name으로 들어옴)
}

2. Loader

JS, JSON이 아닌 다른 유형의 파일을 불러오는데 쓰인다.

예시) css-loader 로 CSS를 JS파일 내에서 불러오고,
style-loader 로 불러온 CSS를 style 요소에 담아준다.

// webpack.config.js

const path = require('path');

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.css$/, // 👈 파일명 .css로 끝나는 파일에만 적용
        use: ['style-loader', 'css-loader'], // 👈 오른쪽부터 css, style 순으로 적용
        exclude: /node_modules/,
      },
    ],
  },
}

// script.js

require './style.css';

추가 로더 목록

3.Plugin

번들링 과정 중에 다양한 작업을 가능하게 해준다.
아래 예시에서 html-webpack-plugin은 index.html에 자동으로 스크립트 요소를 추가해준다.

// webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  ...
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'src', 'index.html'),
      // 👈 <script defer="defer" src="이름.js"></script> 자동추가
    }),
  ],
};

추가 플러그인 목록