Javascript의 Webpack 이란?

 

 

✅ Webpack 이란?

Javascript로 만든 어플리케이션을 위한 정적 모듈 번들러.

즉, 웹 어플리케이션을 구성하는 css, javascript, image 등의 웹 자원을 각각의 모듈로 간주한 뒤, 이들의 의존성 관계를 결합하여 하나의 결과물을 만들어주는 도구이다.

 

Webpack은 프로젝트에서 필요한 모든 모듈을 매핑하고, 하나 또는 여러 개의 번들 파일로 결합하여 의존성 그래프를 생성한다. 이를 통해 웹 어플리케이션의 성능을 최적화하고, 모듈화를 통해 코드의 유지보수성을 높일 수 있다. 또한, 어플리케이션의 로드 시간을 줄이며, 사용하지 않는 코드를 제거하는 tree shaking을 통해 최종 번들 크기를 줄일 수 있다.

 

webpack.config.js 파일을 통해 설정을 할 수 있으며, 진입점과 출력 경로, js, css, img 등의 다양한 파일 형식을 처리하는 규칙 등을 정의한다.

 

webpack 공식 사이트

 

✅ Webpack 사용법

1. 설치

npm install --save-dev webpack webpack-cli

 

 

2. 기본 설정

프로젝트 루트 위치에 webpack.config.js 파일을 생성한다.

const path = require('path');

module.exports = {
  entry: './src/index.js',  // 진입점
  output: {
    filename: 'bundle.js',  // 출력 파일명
    path: path.resolve(__dirname, 'dist')  // 출력 경로
  },
  module: {
    rules: [
      {
        test: /\.js$/,  // .js 파일을 처리
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.css$/,  // .css 파일을 처리
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
};

 

 

3-1. ES5 문법이 필요한 경우, Babel 설치

- Babel : 최신 자바스크립트 문법을 구버전 브라우저에서도 동작하도록 트랜스 파일링 해주는 도구

npm install --save-dev babel-loader @babel/core @babel/preset-env

 

3-2. Babel 설정

프로젝트 루트 위치에 babel.config.js 파일 생성

module.exports = {
  presets: ['@babel/preset-env']
};

 

4. css 로더 설정 (css 파일 처리)

npm install --save-dev style-loader css-loader

// webpack.config.js에 추가

{
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
}

 

 

 

 

✅ Webpack의 주요 기능

 

1. Entry

파일의 진입점이 되는 곳. 의존성 그래프를 만들기 위해서는 파일의 진입점이 필요한데, Entry에서 설정해준다. Entry point가 의존하는 다른 모듈과 라이브러리를 찾아낸다.

 

기본값은./src/index.js이고, 원하는 다른 경로로 설정 가능하다.

// webpack.config.js

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

 

2. Output

웹팩으로 빌드된 파일의 결과물을 설정할 수 있다.

 

filename : 빌드 된 파일의 이름 지정

path : 해당 파일이 위치하는 경로

const path = require('path');

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

 

 

3. Loaders

webpack은 기본적으로 javascript와 JSON 파일만 읽을 수 있는데, Loader를 통해 다른 형태의 파일을 읽을 수 있도록 할 수 있다. 다른 형태의 파일을 모듈로 변환하여 어플리케이션에서 사용할 수 있게 하거나, 의존성 그래프에 추가한다.

 

아래 예제는 import 혹은 require문 내에서 확장자가 txt인 파일의 경로를 발견한다면 raw-loader를 사용하여 변환한 뒤 번들에 추가하라는 의미이다.

const path = require('path');

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

 

css-loader와 ts-loader를 통해 css 파일을 웹팩에 load 하거나 typescript를 javascript로 변환할 수 있다.

// 필요한 로더 설치
npm install --save-dev css-loader ts-loader

 

// css와 ts 파일을 사용할 수 있도록 설정

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' },
    ],
  },
};

 

 

 

4. Plugins

플러그인을 활용하여 번들을 최적화하거나, 에셋 관리, 또는 환경 변수 주입 등과 같은 다양한 작업들을 수행할 수 있다. 주로 Loader가 할 수 없는 작업들을 대체한다.

플러그인을 여러 번 사용할 수 있도록 하기 위해, new 연산자로 호출하여 플러그인의 인스턴스를 생성하는 방식으로 작성한다.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 내장 plugin에 접근하는 데 사용

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

 

 

 

 

5. Mode

webpack에 내장된 환경별 최적화를 할 수 있도록 돕는다.

 

기본값은 production이며, development, none으로 설정 가능하다.

 

- production : DefinePlugin의 process.env.NODE_ENV를 production으로 설정한다. 모듈과 청크, FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, TerserPlugin 등에 대해 mangled name을 사용할 수 있다.

- development : DefinePlugin의 process.env.NODE_ENV를 development로 설정한다. 모듈과 청크에 유용한 이름을 사용할 수 있다.

- none : 기본 최적화 옵션에서 제외

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

 

 

 

 

 

참고

https://webpack.kr/

https://webclub.tistory.com/635

https://velog.io/@gusdh2/Webpack%EC%9D%B4%EB%9E%80-%EC%99%9C-%ED%95%84%EC%9A%94%ED%95%A0%EA%B9%8C%EC%9A%94#plugin