엔트리/아웃풋 - 웹팩(Webpack) 기본편 | 김정환

# 웹팩의 역할 : 모듈로 연결된 여러 개의 자바스크립트 파일을 하나로 합쳐준다.

 - 하나로 합쳐진 파일을 번들이라고 하며, 웹팩은 번들을 만드는 번들러 역할을 한다.

 

> npm install -D webpack webpack-cli  webpack과 webpack-cli 설치

 * -D : npm의 devDependencies(개발용 패키지)에 설치한다.

 

# 웹팩 실행할 때 필수 옵션

* --mode : development(개발용), production(운영에 배포하기 위한 최적화)

* --entry : 모듈의 시작점

* --output : 엔트리를 통해서 웹팩의 모든 모듈을 하나로 합치고 저장하는 경로를 설정

 

node_modules/.bin>webpack-cli --mode development --entry ../../src/app.js --output ../../dist/main.js

현재 디렉토리(.bin)에서 모드는 development으로 하고 ' 경로에 main.js로 저장한다.

 

webpack.config.js  : 

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

* output의 filename을 '[name].js'로 하면 entry에 설정한 key(main)로 치환된다.

: entry가 여러 개일 경우 그에 따른 output도 여러 개가 있어야 하기에 위 방식으로 하면 동적으로 생성한다.

 

# npm(:프로젝트 관리 도구)에 webpack으로 코드를 번들링하는 과정을 등록

package.json : 

  "scripts": {
    "build": "webpack"
  },

 

# entry

 

# output

: 웹팩은 시작점을 기준으로 모든 모듈을 찾아서 하나의 파일로 번들링한 결과

 

---

 

TODO .1 

: 웹팩으로 빌드한 자바스크립트를 여기에 로딩하세요

 

1. npm 설치

> npm init

 

2. webpack 설치

> npm install webpack webpack-cli

 

3. package.json 설정 

  "scripts": { 
    "build": "webpack" 
  }

* npn script에 webpack을 build로 등록

 

4. webpack.config.js 설정

const path = require('path');

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

 

5. webpack 실행

> npm run build