[웹 프로그래밍] Bundler (ICO converter, Babel, Parcel)

Bundler

; JS파일 뿐 아니라, 애플리케이션에 필요한 모든 종류의 파일들을 모듈 단위로 나누어 최소한의 파일 묶음(번들)으로 만들어냄

- Parcel ; 구성 없는 단순한 자동 번들링. 소/중형 프로젝트에 적합

- Webpack ; 매우 꼼꼼한 구성. 중/대형 프로젝트에 적합

- Rollup

 

 

ICO Converter

; ICO 확장자로 변경해줌 

- 32pixel로 설정

https://www.icoconverter.com/

ICO Converter

 

 

parcel-plugin-static-files-copy

https://www.npmjs.com/package/parcel-plugin-static-files-copy

parcel-plugin-static-files-copy

1. $ npm install -D parcel-plugin-static-files-copy

2. package.json >   "staticFiles": {  "staticPath": "static"  }  삽입 ; static이라는 폴더를 dist에 집어넣어줌

 

 

개발 의존성 설치

1. $ npm i -D postcss autoprefixer ; postcss, autoprefixer 설치

2. package.json에 내용 추가

"browserslist" : [
">1%",                 //전 세계의 1%이상인 모든 브라우져
"last 2 versions"      // 마지막의 2개 버젼까지는 지원
]

; 현재 NPM 프로젝트에서 지원할 브라우저의 범위 명시

3. '.postcssrc.js'파일 생성

// 브라우저 ; ESM로 가져오기/내보내기
// NodeJS환경 ; CommonJS로 가져오기/내보내기
module.exports={
    plugins:[
        require('autoprefixer')
    ]
}

4. 저장했을 때 예시로 flex요소에 display: -webkit-box;처럼 되어 있으면 성공

 

 

Babel

; ES6이상 버전을 이전 버전과 호환되는 JS버전으로 변환해주는 JS 트랜스 컴파일러

$ npm i -D @babel/core @babel/presnt-env @babel/plugin-transform-runtime

 

 

Parcel Bundler

https://ko.parceljs.org/cli.html#build

🖥 커맨드 라인 인터페이스(CLI)

- Server ; 개발용 서버 시작. 앱이 수정되면 자동으로 다시 빌드하고, 빠른 개발을 위해 빠른 모듈 고체 지원

$ parcel index.html

- Build ; 애샛을 한 번 빌드. 

$ parcel build.html

- 결과물 디렉토리 ; 기본값 "dist"

 

# HMR(Hot Module Replacement) ; 빠른 모듈 교체. 런타임에 페이지 새로고침 없이 수정된 내용을 자동으로 갱신

 

 

$ npm init -y

$ npm i -D webpack webpack-cli webpack-dev-server@next ; webpack 설치

package.json>"scripts"에 아래 내용 추가

"dev" : "webpack-dev-server --mode development",
"build":"webpack --mode production"

$ npm i -D html-webpack-plugin

$ npm i -D copy-webpack-plugin

webpack.config.js 파일 생성 ; 직접 구성옵션 작성해야함

// import
const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')

module.exports = {
  // 파일을 읽어들이기 시작하는 진입점 설정 (parcel index.html같은)
  entry: './js/main.js', 
  // 결과물(번들)을 반환하는 설정
  output: { 
    // path:path.resolve(__dirname, 'dist'),             //public이라는 폴더에    (이는 기본값임)  
    // filename:'main.js',                               //main.js를 만듬         (이는 기본값임)
    clean: true
  },
  // 번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정
  plugins: [
    new HtmlPlugin({
      template:'./index.html'
    }),
    new CopyPlugin({
      patterns: [
        {from: 'static'}
      ]
    })
  ],
  devServer:{
    host:'localhost'
  }
}