1. Mode

mode는 development, production, none 이 있는데 development 는 개발환경의 결과물을 만들 때,

운영 환경에서는 production을 사용한다.

// webpack.config.js
module.exports = {
   mode: "development",
   ...

2. Entry (엔트리)

entry는 최초 진입점이다. 시작점 경로를 지정하는 옵션이다.

기본값은 ./src/index.js 이고, 다르게 설정할 수 있다. (다중엔트리 포인트를 설정할 수도 있다.)

// webpack.config.js
module.exports = {
  entry: {
    main: "./path/to/my/entry/file.js",
  },
}

3. Output

output은 번들링 결과물을 위치할 경로다.

path.resolve() 함수는 절대경로 주소를 얻어온다.

// webpack.config.js
const path = require("path")

module.exports = {
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./dist"),
  },
}

[name] 옵션은 entry에서 설정한 값을 포함한다.

주로 다중 엔트리 포인트를 만들 때 쓴다.

// webpack.config.js
module.exports = {
  entry: {
    app: "./src/app.js",
    search: "./src/search.js",
  },
  output: {
    filename: "[name].js",  // here
    path: __dirname + "/dist",
  },
}