[web] webpack이란? Node와 함께 사용해보자

webpack을 왜 사용하는데?

여러 개의 js 파일이 있고, 그 많은 파일을 한 번에 실행한다고 하면 변수 이름이 중복될 수 있다.

변수 이름이 중복되면 마지막에 선언된 변수만 살아남고 그 전 변수는 아무 의미 없게 된다.

 

기존의 html에서 js를 가져오는 방식인 <script src=""></script> 는 브라우저에서도 js 파일에 선언된 변수에 접근할 수 있는데,

ES Module인 import, export 를 사용하면 접근할 수 없게 된다.

이러한 방법을 모듈화라고 한다. 최신 브라우저에서는 모듈화를 거의 지원한다.

모듈을 사용하려면 <script type="module"></script> 로 명시해주면 된다.

 

웹에서 사용하는 굉장히 많은 파일을 하나로 묶고 모듈을 사용하게 해주는 것이 bundler 라고 한다.

bundler의 대표 주자는 webpack!

 

bundle한 후 용량을 줄이기 위해 변수명도 굉장히 간단해 진다.

 

webpack을 실행해보자

먼저 Node를 이용해 webpack를 설치한다.

$ npm install webpack webpack-cli -D

 

터미널에서 webpack를 실행하는 방법은 아래와 같다.

$ npx webpack --entry {entry 포인트가 되는 파일의 주소} -o {bundle된 결과물 주소}

# 예시
$ npx webpack --entry ./front/static/js/index.js -o ./public/index_bundle.js

 

계속해서 이렇게 하나씩 실행하지 않고 config 파일로 설정할 수 있다.

// webpack.config.js
const path = require('path');
module.exports = {
  mode: 'development',
  entry: './front/static/js/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js',
  },
};

터미널과 실행했던 것과 결과는 같다.

주의할 점은 mode가 development로 설정되어 있는데, 배포와 다르게 설정하려면 배포용 파일을 따로 만들면 된다.

// webpack.config.prod.js
const path = require('path');
module.exports = {
  mode: 'production',
  entry: './front/static/js/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js',
  },
};

mode가 production이다.

 

config 파일을 실행하려면 아래 명령어를 통해 설정해주고, 실행해주면 된다.

# config 설정
$ npx webpack --config webpack.config.js
$ 실행
$ npx webpack

 

Loader

css는 번들링이 안되는건가?

브라우저의 network 탭에 가보면 js는 한 번에 bundling이 되었지만, css는 그대로 가지고 오는 것을 볼 수 있다.

js가 아닌 다른 파일들도 bundling을 하고 싶다면, loader를 사용하면 된다.

 

loader를 사용하려면 config 파일에 몇 가지를 추가해주어야 한다.

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './front/static/js/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js',
  },
  /* 추가된 부분 */
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

test에서 확장자를 가지고 와서 use에 있는 로더를 통해 bundling한다.

기억해야 할 점은 use에서 기재한 순서와 반대로 실행된다는 점이다.

여기서는 css-loader가 실행된 후 style-loader가 실행된다.

 

이 외 다양한 로더는 webpack 공식 문서에서 확인할 수 있다.

 

하나의 파일이 아니라 여러 개의 파일로 번들링하고 싶으면

entry에 객체를 만들어 넣어주면 된다. 그리고 output의 filename에서 entry의 객체에서 설정한 key를 설정할 경우 [name] 으로 대체해주면 된다. name말고도 여러 가지가 있으니 궁금하면 문서에 가서 확인해보자.

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    index: './front/static/js/index.js',
    about: './front/static/js/about.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]_bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

 

추가적으로 파일이 변경될 때마다 자동으로 webpack를 실행해주는 명령어를 실행해놓고 개발하면 편하다.

$ npx webpack --watch