What is webpack? 웹팩 개념 정리

🙋🏻‍♀️

안녕하세요! 테일러입니다. 오늘은 webpack 에 대해 알아보겠습니다.

https://webpack.js.org/concepts/ 를 참고하여 기본 개념들을 정리해보았습니다.

모듈 번들러 webpack

webpack 은 모던 JS application을 위한 static module bundler 입니다.

webpack은 application이 필요로하는 모든 모듈들에 대해 dependency graph를 계산해서 이를 통해 하나 이상의 번들(bundle)로 만들어냅니다.

💁🏻‍♀️

한마디로 webpack은 모듈번들러입니다!

이제 webpack.config.js 에 포함되는 webpack의 주요 개념들과 각각에 어떤 세팅을 하게되는지 살펴보겠습니다.

 

Entry

entry는 webpack이 dependency graph를 빌딩하기 위한 시작점(진입점)을 지정합니다.

webpack은 설정된 entry point를 시작으로 직간접적으로 의존하는 모듈, 라이브러리들을 계산해서 dependency graph를 만듭니다.

• 기본값

  ./src/index.js

• 다른 값으로 세팅할 경우

  module.exports = {
    entry: './path/to/my/entry/file.js',
  };

 

Output

output 설정을 통해 webpack이 만들어낼 bundle을 어디에 위치시킬건지, 그리고 해당 파일명도 정할 수 있습니다.

• 기본값

  메인 아웃풋 파일 → ./dist/main.js

  메인 아웃풋 폴더 → ./dist/

• 다른 값으로 세팅할 경우

  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',
    },
  };

   

Loaders

기본적으로 webpack은 JavaScript, JSON 파일만 이해할 수 있습니다. 그러면 다른 형식의 파일들은 어떻게 처리할 수 있을까요?

Loader 를 이용해서

• 다른 파일 형식들도 처리하여

• application이 사용할 수 있는 모듈로 바꾸고

• 이를 dependency graph에 추가할 수 있습니다.

loader와 관련된 webpack 설정은 두가지가 있습니다.

1. test : 어떤 파일들이 변환되어야 하는지 명시

2. use : 변환을 위해 어떤 loader를 사용해야 하는지 명시

const path = require('path');

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

위 예시를 보면 하나의 모듈에 대해 test, use 이루어진 rules 프로퍼티를 설정합니다.

위 설정을 통해 require(), import 에서 .txt 파일을 사용할 경우 raw-loader 를 사용해서 변환해서 bundle에 포함시킬 수 있게됩니다.

 

Plugins

loader가 모듈을 변환하는데 사용된다면,

plugin을 통해 webpack의 능력을 확장하여 아래와 같은 다양한 작업에 활용 할 수 있습니다.

• bundle optimization (번들 최적화)

• asset management

• injection of environment

plugin을 사용하려면 require()을 통해 선언하고, plugins array에 추가하면 됩니다.

대부분의 plugin은 옵션을 통해 커스터마이즈 할 수 있습니다. 이를 통해 동일한 플러그인을 다른 목적으로 여러개 사용할 수 있기 때문에, new operator를 사용하여 인스턴스를 만들어 사용합니다.

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
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' })],
};

위 예시의 경우 html-webpack-plugin을 사용하면 번들링된 파일들을 주입한 HTML 파일을 만들어낼 수 있습니다.

• 다양한 플러그인 리스트 https://webpack.js.org/plugins/

 

Mode

mode파라미터를 development, production, none 과 같은 값으로 세팅하면, 각 환경에 적합한 webpack 빌트인 최적화를 사용할 수 있습니다.

• 기본값

  production

• 각 mode 별로 설정된 최적화를 확인하고 싶다면 mode-configuration 를 확인하세요!

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

 

Browser Comapatibility

웹펙은 ES5-compliant(IE8 이하 지원불가)인 모든 브라우저를 지원합니다. webpack은 import(), require.ensure()를 위해 Promise를 사용합니다. 이전 브라우저도 모두 지원해야한다면, polyfill을 로드해야합니다. (참고 load-a-polyfill)

 

Environment

webpack5는 Node.js 10.13.0+를 사용합니다.

 

🔗 Link

• https://webpack.js.org/concepts/