웹팩

웹팩이란?

모듈을 지원하기 시작한 것은 es2015(es6) 이상 입니다.
그 전에는 그럼 어떻게 했냐? 우리가 알고 있듯이 script 를 하나씩 로드해서 사용하였습니다.
또는 위와 같은 문제를 개선하여 즉시 실행 함수 (IIFE) 방식을 사용하였습니다.
그러면서 다양한 모듈 스펙 (AMD, CommonJS, UMD) 등이 나오기 시작하였습니다.

웹팩은 여러 개 파일을 하나의 파일로 합쳐주는 번들러 입니다. 시작점인 엔트리를 기준으로 의존되어 있는 모듈을 찾아
하나의 결과물로 합쳐서 만들어줍니다.

웹팩 설치

// 앞에 @ 를 붙여 원하는 버전을 설치할 수 있음. 나는 4버전을 설치하겠음
npm install webpack@4
npm install webpack webpack-cli

설치가 완료되면 아래와 같이 webpack.config.js 파일을 만들어 줍시다.

webpack.config.js

const path = require("path")

module.exports = {
  mode: "development",
  // 시작
  entry: {
    main: "./src/app.js",
  },
  // 끝
  output: {
    filename: "[name].js",
    path: path.resolve("./dist"),
  },
}

이제 webpack 명령어로 실행해보면 번들링이 시작될 것 입니다.
https://white-blank.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F#