[Webpack] webpack을 이용한 개발환경 구성

eslim·2020년 10월 18일
0
post-thumbnail

React를 공부하다 보면 Webpack과 Babel을 보게 되는 경우가 있었는데 따로 webpack을 공부해본 적은 없었다. 이번에 3개월차 기업협업을 나가게 되면서 vue.js를 사용하게 된다는 이야기를 듣고, webpack 공부를 시작해보려고 한다.

1. Webpack

- 웹팩은 모듈 번들러이다.

  • 여러 개의 모듈을 하나의 파일로 묶어서 보낼 모듈 번들러가 필요하다. 웹팩에서는 자바스크립트, 스타일시트, 이미지 등 모든 것을 모듈로 보며, 이런 웹팩에는 중요한 속성이 4가지 있다.

1-1. Webpack 속성

1) Entry

entry 는 웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점이며, 자바스크립트 파일 경로 이다. 웹팩은 entry 를 통해서 모듈을 로딩하고 하나의 파일로 묶는다.

  • require, @import 등 모듈간의 의존성을 해석하며 의존성 트리를 생성, 하나 이상의 진입 포인트를 설정할 수 있다.
// 속성을 사용하여 하나 이상의 진입 포인트를 설정 가능
{
  entry: {
    app: './src/app.js'
  }
}

2) Output

웹팩에서 entry 로 찾은 모듈을 하나로 묶은 결과물을 반환할 위치이다.

  • output.path: 결과물이 저장될 경로 지정
  • output.filename: 결과물의 파일 이름 지정

매개변수 설정

{
  entry: {
    app: './src/app.js'
  },
  output: {
    path: '/dist',
    filename: '[name].bundle.js'
  }
}

3) Loader

웹팩은 기본적으로 자바스크립트와 JSON 만 빌드할 수 있다. 자바스크립트가 아닌 다른 자원 (HTML, CSS, Image)를 빌드할 수 있도록 도와주는 속성이다.

  • loader 는 module 과 rules 이라는 키워드를 사용합니다. 룰을 정의 할 때는 아래의 폼을 사용합니다.
module: {
  rules: [
    {
      test: '빌드할 파일 확장자 정규식'
      exclude: '제외할 파일 정규식'
      use: {
        loader: '사용할 로더 이름'
        option: '로더 옵션'
      }
    }
  ]
}

4) Plugin

plugin 은 웹팩의 기본적인 동작 외 추가적인 기능을 제공하는 속성이다. loader 는 파일을 해석하고 변환하는 과정에 관여하고, plugin 은 결과물의 형태를 바꾸는 역할을 한다.

// ...
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
    })
  ],
// ...

0개의 댓글