Webpack

Webpack

의존관계이 있는 모듈들을 하나의 자바스크립트 파일로 번들링하는 모듈 번들러 입니다.
여러 개의 자바스크립트 파일을 번들링하고, 트랜스파일링 작업을 할 수 있습니다.

Webpack vs Gulp

Gulp 도 위의 동작과 비슷하게 할 수 있지만, Gulp 는 단순 task runner 일 뿐이다. (같은 일을 자동으로 처리하는..)
Webpack 은 Package Builder 라고 불리는데 Package.json 의 스크립트를 기반으로 동작하기 때문이다. (Gulp 는 gulpfile..)
쉽게 생각해보면, 규모가 작고 간단한 일만 처리하는 프로젝트라면 Gulp 를 사용하는 것이 훨씬 가성비가 좋다.
대신에 규모가 큰 프로젝트라면, Gulp 의 기능 + 의존성 관리 기능(예: 노드 기반으로 브라우저 환경에서 실행 가능.)을 가지고 있는 Webpack 을 사용하는게 더 좋습니다.

줄여서 단위가 작으면 Gulp, 크면 Webpack

설치

npm install --save-dev webpack wepack-cli

실행

아래 스크립트 태그를 추가하여, npm run build, yarn build 를 하여 빌드할 수 있습니다.

"build": "webpack --mode=none",

webpack.config.js

config 를 설정하여, 여러가지 작업을 추가 및 실행할 수 있습니다.

@babel/core, @babel/preset-env, babel-loader

Babel 패키지를 다운로드 합니다.

babel-polyfill

Babel을 사용하여 ES6+ 코드를 ES5 이하로 트랜스파일링하여도 브라우저가 지원하지 않는 코드가 남아 있을 수 있다.
예를 들어 Promise,Object.assign 등 ES5 언어로 트랜스파일링하여도 대체할 기능이 없기 때문이다.

@babel/plugin-proposal-class-properties

static 클래스 속성 또한 트랜스파일링 합니다.

const path = require('path');

//Webpack을 실행하면 트랜스파일링 및 번들링을 실행합니다. 트랜스파일링은 Babel이 실행하고 번들링은 Webpack이 실행한다.
module.exports = {
  // https://webpack.js.org/concepts/mode/#mode-development
  mode: 'development',
  // entry file 번들링 하고 싶은 파일들을 선언해 주면 된다.
  // entry: ['@babel/polyfill', './src/js/index.js'],
  entry: {
    bundle: './src/js/index.js'
  },
  // 컴파일 + 번들링된 js 파일이 저장될 경로와 이름 지정
  // output: {
  //   path: path.resolve(__dirname, 'dist/js'),
  //   filename: 'bundle.js'
  // },
  output: {
    path: path.resolve(__dirname, 'dist/js'),
    filename: 'index.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [
          path.resolve(__dirname, 'src/js')
        ],
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-proposal-class-properties']
          }
        }
      }
    ]
  },
  devtool: 'source-map'
};

.babelrc

{
    "presets": ["@babel/preset-env"],
    "plugins": ["@babel/plugin-proposal-class-properties"]
}

package.json

아래에 스크립트와 의존성들이 잘 설치되었는지 확인.
밑에 scripts 들로 하나씩 빌드를 하면 bundle, production 버전을 확인할 수 있습니다.

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode=none",
    "bundle": "webpack --mode=development",
    "production": "webpack --mode=production"
  },
  "devDependencies": {
    "@babel/core": "^7.15.5",
    "@babel/preset-env": "^7.15.6",
    "babel-loader": "^8.2.2",
    "webpack": "^5.56.0",
    "webpack-cli": "^4.8.0",
    "wepack-cli": "0.0.1-security"
  }
}

비고

실제로 회사에서 Gulp 를 이용하기 때문에, Gulp 에 대한 경험은 있는데 비해, Webpack 에 대한 경험은 전무하다.
어떤 식으로 동작하는지 알고 싶고, Gulp 와의 차이, 현재 제품들에 입혔을 때 benefit 이 있을지 확인 하기 위해
공부를 하였다.