웹팩(WebPack)

서버에서 처리하는 로직을 JavaScript로 구현하는 부분이 많아지면서 웹 서비스 개발에서 JavaScript로 작성하는 코드의 양이 늘어났고, 유지/보수가 쉽도록 코드를 모듈로 나누어 관리하는 모듈 시스템이 필요해졌다.

그러나 JavaScript는 언어 자체가 지원하는 모듈 시스템이 없고, 이런 한계를 극복하려 여러 가지 도구를 활용하는데 그 도구 가운데 하나가 webpack이다.

장점

• 여러 파일의 자바스크립트 코드를 압축하여 최적화 할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있다.
• 모듈 단위로 개발이 가능하여, 가독성과 유지보수가 쉽다.
• 최신 자바스크립트 문법을 지원하지 않는 브라우저에서 사용할 수 있는 코드로 쉽게 변환시켜 준다.

주요 속성

Entry

• entry는 웹팩이 빌드할 파일의 시작 위치를 나타낸다.
• entry의 디폴트로 설정된 값은 ./src/index.js 이다.

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

Output

• output은 웹팩에 의해 생성되는 번들을 내보낼 위치와 파일의 이름을 지정한다.
• output의 기본값은 ./dist/main.js 이다.

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  }
}

Loaders

• loaders를 통해 자바스크립트 파일이 아닌 파일들도 유효한 모듈로 변환시켜준다.
• loaders의 설정은 싱글 모듈에 대한 rules 프로퍼티를 정의해야 하며,
  rules 프로퍼티는 test와 use를 필수 프로퍼티로 가지고 있다.
• test 프로퍼티는 변환해야 하는 파일 또는 파일들을 식별하는 역할을 한다.
• use 프로퍼티는 변환되어야 하는 파일에 대하여 어떤 로더를 사용해야 하는지 설정한다.

const path = require('path')

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

Plugins

• 로더가 파일단위로 처리하는 반면 플러그인은 번들된 결과물을 처리한다.
• 번들된 자바스크립트를 난독화 한다거나 특정 텍스트를 추출하는 용도로 사용할 수 있다.

const HtmlWebpackPlugin = require('html-webpack-plugin')
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'})
  ]
}

Mode

• mode는 웹팩을 세팅함에 있어서 development, production, none 중 하나를 파라미터로 사용한다.
• “production”은 최적화되어 빌드되어진다.
• “development”는 빠르게 빌드된다.
• “none”은 아무 기능 없이 웹팩으로 빌드된다.

module.exports = {
  mode: 'production'
}

JavaScript 모듈화 도구, webpack
[JS][WEBPACK] 1. 웹팩이란 무엇인가