[Bundler] Parcel 설정법

Parcel-plugin-static-files-copy

in package.json

"staticFiles": {
  "staticPath": "static"
}

Static 폴더 안의 정적 파일들은 Parcel-plugin-static-files-copy을 통해서 dist 디렉토리에 컴파일될 수 있다.

autoprefixer

• 브라우저를 제작하는 회사 - 벤더사
• 자신의 브라우저에 동작하게 할 수 있는 자체 기술을 사용한다. (표준적인 기술 이외에도)
• 구형 브라우저에서도 동작할 수 있도록 표준 기술 이외에도 특정 브라우저에만 동작하는 태그(webkit-, ms- 등)를 자동으로 생성할 수 있게 한다.

npm i -D postcss autoprefixer

를 통해서 postcss, autoprefixer 두개의 모듈을 설치한 다음

  "browserslist": [
    "> 1%", // 점유율 1% 이상인 모든 브라우저의
    "last 2 versions" // 최근 2개의 버전까지는 지원을 하겠다.
  ]

-> 이렇게 하면 CSS 속성에 특정 기술에 해당하는 접두사가 생성되게 된다.

postcssrc.js

• 뒤에 rc(Runtime Configuration)가 붙은 파일은 구성 파일을 의미
• 이 파일을 통해 Parcel이 css 파일을 읽고 autoprefixer를 통해 특정 접두사를 생성시킨다.

const autoprefixer = require("autoprefixer");

module.exports = {
  plugins: [autoprefixer],
};

이후 CSS 속성에 display: flex;를 주고, Parcel로 번들링을 실행하면,

body h1 {
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

이렇게 자동으로 -webkit-box, -ms-flexbox가 생성되게 된다.