본문 바로가기
유료강의

bundler 1. parcel

by SOLYI 2021. 10. 17.

이번강의 github -> https://github.com/choi-solyi/parcel-template-basic

  • 번들러는 대표적으로 parcel과 webpack 이 있다.
    • parcel : 단순한 자동 번들링. 소,중형 규모에 적합
    • webpack : 매우 꼼꼼한 구성. 중,대형 규모에 적합

프로젝트 생성 후

  • npm init -y

 

@이미지 정적으로 관리하기

  • npm i -D parcel-bundler
  • npm i -D parcel-plugin-static-files-copy
// package.json 에 다음 추가
  "staticFiles":{
    "staticPath": "static"
  }

 

@autoprefixer :

브라우저리스트 옵션은 현재 npm프로젝트에서 지원할 브라우저의 범위를 명시하는 용도.
그 명시를 autoprefixer 패키지가 활용

  • npm i -D postcss autoprefixer
  • npm i -D autoprefixer@9
//package.json 에 아래 추가
  "browserslist": [
    "> 1%", 
  "last 2 versions"
  ]
  
//.postcssrc.js 파일 생성 후 다음 추가
module.exports = {
    plugins:[
        require('autoprefixer')
    ]
}

@babel : ES6 이전버전에서도 호환이 되도록 도와주는 

  • npm i -D @babel/core @babel/preset-env
  • npm i -D @babel/plugin-transform-runtime
//.bablerc.js 생성 후 다음 추가
module.exports = {
    presets: ['@babel/preset-env'],
    plugins: [
        '@babel/plugin-transform-runtime'
    ]
}

 

포트번호 변경

  • parcel serve entry.js --port 1111

브라우저 열기(기본은 비활성)

  • parcel entry.js --open
반응형

'유료강의' 카테고리의 다른 글

패스트캠퍼스 프론트엔드 수강 중간 후기 (진도율38%)  (0) 2021.11.03
개발관련 사이트  (0) 2021.10.17
bundler 2.bundler  (0) 2021.10.17
Node.js npm 버전관리 / gitignore  (0) 2021.10.15
Node.js 설치 및 실행 방법  (0) 2021.10.15