와! 코드압축!

이전에 이론으로 웹팩을 배웠는데, 마침 바닐라 JS로 작성한 포트폴리오 사이트를 보니 스크립트를 여러개 불러오고 있었다.

이론을 실전에 적용하기 좋은 타이밍이여서 못 참고 웹팩을 적용해보기로 했다.

초기 설정 및 웹팩 설치

npm init -y
npm install --save-dev webpack webpack-cli

webpack.config.js 파일을 생성하고 최소한의 설정을 추가한다.

const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

프로젝트 구조

project-root
├── src
│   ├── index.js
│   ├── data.js
│   ├── scrollControl.js
│   └── gsap.js
├── dist
│   └── 빈 폴더
├── index.html
├── styles.css
└── webpack.config.js

스크립트 불러오기