웹팩이란? (빌드과정)

---

웹팩(Webpack) 이란?

웹팩은 모듈 번들로러, 프론트엔드 프로젝트에서 다양한 리소스를 관리하고 최적화 하는 도구이다. 

 

JavaScript 파일 뿐만이 아니라, CSS, 이미지, 폰트 등 다양한 파일을 하나의 빌드된 파일로 만들어준다. 

 

모듈 번들이란? 

- 여러 파일들을 하나의 파일로 병합하는 것을 모듈 번들링 이라고 하면 일련의 과정이라고 생각하면 된다.

 

https://strap.tistory.com/118

번들이란? (bundle) / 모듈이란? (module)

 

 

웹팩의 등장 배경

파일단위의 자바스크립트 모듈 관리의 필요성과 웹 애플리케이션의 빠른 로딩 속도와 높은 성능등을 위하여 생겨났다.

 

쉽게말해 모듈화 하지 않았을 때 생기는 문제점들, 그리고 js파일등 프로젝트 단위가 커져 로딩속도가 늘어나는 문제점들을 위해서 생겨나게 되었다. 

 

자세한 설명은 앞의 블로그를 참고해보자!

 

https://myung-ho.tistory.com/98

[Webpack] 웹팩이란? 웹팩을 사용하는 이유

 

---

 

웹팩 (Webpack) 빌드 과정

Entry Potion 설정

웹팩은 프로젝트의 시작점을 정의하한다.

 

이를 EntryPoint라 하며 주로 'src/index.js'나 'src/index.ts'와 같이 프로젝트의 메인 JavaScript 또는 TypeScript 파일을 지정한다.

 

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

 

 

Loader 적용

웹팩은 여러 파일을 하나로 병합 및 압축하는 기능을 제공하고 있다. 따라서 네트워크의 부담을 줄여줘 더 빠른 서비스를 제공할 수 있다. 

 

웹팩이 다양한 파일 형식을 처리할 수 있는 이유는 이 로더(Loader)라는 프로그램 덕분이다. 

 

각각의 로더가 특정 파일 형식에 대한 변환 규칙을 갖고 이를 통해 변환하는 작업을 수행한다. 

 

예를 들어 Babel로더를 사용하여 ES6+ 코드를 ES5로 변환하거나, CSS로더를 사용하여 CSS파일을 JavaScript 모듈로 변환한다.

 

아래는 예시 로더에 대한 예시코드이다.

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/, // 정규표현식으로 파일 형식을 지정
        exclude: /node_modules/, // 로더를 적용하지 않을 디렉토리 지정
        use: 'babel-loader', // 사용할 로더 지정
      },
      // 다양한 로더를 추가할 수 있음
    ],
  },
};

 

 

플러그인 (Plugin) 적용

로더가 파일단위로 처리하는 반면, 플러그인은 번들된 결과물을 처리한다. 

 

예를 들어, UglifyJS 플러그인을 사용하여 JavaScript 코드를 압축하거나, Html/WebpackPlugin을 사용하여 HTML 파일에 자동으로 빌드 결과물을 추가할 수 있다.

 

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html', // 템플릿 파일 지정
      minify: {
        collapseWhitespace: true,
        removeComments: true,
        removeRedundantAttributes: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        useShortDoctype: true,
      },
    }),
    // 다양한 플러그인을 추가할 수 있음
  ],
};

 

 

Output 설정

번들된 결과물의 출력 경로와 파일명을 설정한다. 

 

// webpack.config.js
module.exports = {
  // ...
  output: {
    path: path.resolve(__dirname, 'dist'), // 번들된 파일의 출력 경로
    filename: 'bundle.js', // 번들된 파일의 이름
  },
};

 

 

모듈 번들링

웹팩은 정의된 EntryPoint 를 시작으로 의존성 그래프를 분석하고 필요한 모듈을 찾아 번들링한다.

 

의존성 그래프를 기반으로 최종적으로 하나의 번들 파일을 생성한다.