Webpack은 하나의 시작점(Entry point)으로부터 의존적인 모듈을 전부 찾아내서 하나의 파일로 만든다.

이 결과물을 Output 이라고 한다.

1. 설치

Webpack4 이후 버전부터는 CLI를 같이 설치해야 커맨드라인에서 사용할 수 있다.

$ npm install --save-dev webpack
$ npm install --save-dev webpack@<version> # 특정 버전 설치 1.2.1 / 아니면 next
$ npm install --save-dev webpack-cli

—save-dev 옵션이나 -D 옵션을 추가하여 설치하면 package.json 파일안에서 dependencies 가 아니라 devDependencies에 기록이 되는데, 라이브러리를 설치할 때 어플리케이션에서 직접 쓰이는 것과 개발 환경에서만 쓰이는 것을 이렇게 분리하여 설치하는 것이 좋다.

// package.json
"dependencies": {
  "react-switch": "^5.0.1"
},
"devDependencies": {
  "prettier": "^1.19.1",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
}

cf) npm install (plugin) --save는 --production 빌드시 플러그인이 포함되지만,

npm install (plugin) --save-dev로 설치한 플러그인은 --production 빌드시 해당 플러그인이 포함

되지 않는다.

2. webpack.config.js

webpack.config.js은 Webpack이 실행될 때 참조하는 설정 파일이다.

최상단에 webpack.config.js 파일을 만들면 이를 Webpack에서 자동으로 사용한다.

const path = require("path");

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

첫줄의 path 는 경로를 만들어주며 Node.js에 기본으로 깔려있는 패키지이다.

webpack 자체가 노드에서 돌아가기 때문에 이 모듈도 노드형 모듈을 사용한 것이다.

import path from "path" 와 같다. 그렇지만 쓸 수는 없다.

( webpack.config.js 는 모던 자바스크립트 파일이 아니라서, import 를 쓸 수 없다. )