Webpack 알아보기 & 설치방법

✔️ Webpack(웹팩) 이란?

웹팩 은 오픈 소스 자바스크립트 모듈 번들러로 요즘 프론트엔드 개발에 필수라고 할 수 있는 요소 중 하나인데요. 여러개로 나눠져 있는 파일들을 하나의 js코드로 압축하고 최적화 하는 라이브러리입니다.

✔️ Webpack(웹팩) 구성요소

웹팩은 Entry, Output, Loaders, Plugins, Mode로 구성되어 있습니다.

Entry

• 웹팩이 빌드할 파일의 시작 위치를 나타냅니다.
• entry 지점으로부터 import되어 있는 다른 모듈과 라이브러리의 연관성을 찾습니다.
• entry의 디폴트로 설정된 값은 ./src/index.js 입니다.

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

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

✔️ Webpack 설치 방법

npm init
npm install -D webpack webpack-cli
npx webpack-cli .src/index.js

웹팩 설치 방법은 매우 간단합니다. 번들링을 할 디렉토리에 들어가서 위 명렁어를 차례로 입력해주면 됩니다.

npx create-react-app [파일명]

웹팩으로 빌드를 하고 싶은 경우는 위 명령어를 입력해주면 됩니다.

✔️ 참고 사이트

https://medium.com/@woody_dev/js-webpack-1-%EC%9B%B9%ED%8C%A9%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-f29ebca31da4

🔔포스팅 공지
개인 공부 기록용 블로그 입니다.
잘못된 부분이 있을 시 메일이나 댓글로 지적해주시면 감사드리겠습니다 :)