[Vue.js] 웹팩의 주요 속성 4가지

출처

프론트엔드 개발자를 위한 웹팩 - 인프런 | 강의

Output | 웹팩 핸드북

 

---

 

 

 

◽ 주요 속성 4가지

- entry: 빌드를 할 대상 파일 정의

- output: 빌드를 한 후(=웹팩으로 변환 후)의 결과물에 대한 정보를 저장

- loader(module): entry -> output 단계에서 개입

- plugins: 플러그인

 

 

◽ mode

- none, production, development 3가지이다.

// package.json
"scripts": {
    "build": "webpack --mode=production",
}

 

 

◽ *.config.js 작성하기

1. entry: 웹팩에서 웹 자원을 변환하기 위해 필요한 파일 경로이다.

2. output: 웹팩을 돌리고 난 결과물의 파일 경로이다. filename을 지정하고, resolve api를 사용하여 관리가 용이한 /dist 폴더를 만들어 나갈 수 있다.

// 사용자가 새로고침 하지 않아도 되도록 [chunkhash]를 사용한다.
module.exports = {
  output: {
    filename: '[chunkhash].bundle.js'
  }
};

 

3. loader

- 'Module'이라는 이름을 사용한다.

- 웹 어플리케이션을 해석할 때 웹 자원을 변환할 수 있도록 돕는 속성

- 비자바스크립트 파일(css, img 등)을 웹팩에 인식시켜줄 수 있다.

- use에는 배열형태로 적어준다.

- use에 기재된 순서도 중요하다. 오른쪽 -> 왼쪽 방향으로 읽는다.

module: {
    // 모든 js파일에 대해 babel을 돌리겠다.
    test: /\.js$/,
    use: ['babel-loader']
}

 

4. plugin

- 기본적인 동작에 추가적인 기능을 제공하는 속성이다.

- 결과물의 형태를 바꾸는 역할이다.

- 생성자 함수로 생성한 객체 인스턴스만 추가할 수 있다.

 

 

◽ loader와 plugin 참고

https://webpack.js.org/loaders/

https://webpack.js.org/plugins/