20210602 Bundler01 : 번들러 개념, Parcel (프로젝트 초기 설정, 정적 파일 연결, CLI, PostCSS, Autoprefixer, Babel), Webpack(프로젝트 초기 설정, 구성 옵션 파일 작성(config), html기준 플러그인, 정적파일연결하..

Bundler01

• 여러가지 개발할 때 필요한 라이브러리, 프레임 워크 등의 결과를 브라우저가 인식할 수 있도록 변환해 줌
• 번들러 자체가 변환해주는 것은 아니고, 해당 라이브러리, 프레임워크등이 가진 변환 패키지들을 번들러가 관리해서 변환을 도와주고 웹에서 동작까지 시킴

Parcel vs Webpack

Parcel

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

Webpack

• 매우 꼼꼼한 구성
• 중/대형 프로젝트에 적합

Parcel

프로젝트 생성

• npm init -> 프로젝트 시작
• npm i -D parcel-bundler -> 번들러 개발 의존성으로 설치
• package.json 파일 script 수정
  • "dev": "parcel index.html"
  • "build": "parcel build index.html"
• index.html 파일 생성
  • main.scss, main.js, reset-css CDN연결 (주의! reset이 먼저 인식되게 위에 위치해야함)
• scss, js 파일 시범 코드 작성
• 연결이 잘되었나 test -> npm run dev 개발 서버 오픈해서 확인

정적 파일 연결 (parcel-plugin-static-files-copy)

• img, favicon 연결

• favicon 변환 사이트

  • 32px 이면 충분함

• image 및 폴더를 브라우저에 표시하려면 dist에 저장이 되어야 함

• dist는 언제든지 지워질 수 있는 폴더라서 원본을 관리하기엔 그러므로 자동으로 dist파일에 사본을 추가해주는 라이브러리를 사용함

• NPM : parcel-plugin-static-files-copy
• static이라는 폴더에 있는 파일을 copy해서 dist 폴더에 넣어줌
• npm install -D parcel-plugin-static-files-copy
• package json에 해당 속성 추가

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

Parcel CLI

• Parcel : 커맨드 라인 인터페이스 (CLI)

• HMR(Hot Module Replacement)

  • : 런타임에 페이지 새로고침 없이 수정된 내용을 자동으로 갱신하는 방식
  • (기본값 : 활성 / 비활성: --no--hmr)

• 파일시스템 캐시

  • : 캐시가 활성화 되면, 기존의 데이터를 기억하여 개발서버를 열거나, 제품화 시킬때 훨씬더 빠르게 처리함
  • (기본값: 활성 / 비활성: --no--cache)
  • 캐시 때문에 문제를 일으키는 경우도 있어서

• 브라우저에서 열기

  • : 개발 서버 open시 브라우저 자동 열기 옵션
  • (기본값: 비활성 / 활성 : --open)

• 결과물 디렉토리

  • : 변환된 결과물이 저장되는 폴더
  • (기본값 : dist)

• 포트번호

  • : 포트 번호를 나타내고, 포트번호 변경이 가능함
  • (기본값: 1234 / 변경: --port 번호)

• 등... 여러가지가 있으므로 홈페이지 참고

• 필요에 따라 옵션을 제공하여 사용하자 (parcel 번들러가 원하는게 최소한의 개입이다 보니)

PostCSS, Autoprefixer

• 구형의 브라우저에서도 최신의 브라우저 기술이 작동 할 수 있도록 Vender prefix (공급 업체 접두사)를 붙여 보험을 들어 놓을 수 있음
  • 현재는 웹표준이지만 구형 브라우저 버전에서는 시험적으로 사용되어 모든 브라우저에서 다른 키워드로 사용되는 기능이였을 경우 보완하고자 사용함
• 하지만, 모든 브라우저에 접두사 키워드를 찾아서 사용하긴 힘든데 이를 관리해주는 라이브러리가 있음

• postcss : javascript 플러그인을 사용하여 CSS를 변환시키는 css 후 처리 툴로, 다양한 플러그인을 추가할 수 있는 환경을 제공함
• autoprefixer : postcss에서 제공하는 플러그인중 하나로, 자동으로 prefix를 붙여줌
• npm i -D postcss autoprefixer (띄어쓰기로 한번에 두개 패키지 다운)

browserslist 옵션 (autoprefixer)

{
  "browserslist": ["> 1%", "last 2 version"]
}

• 현재 npm 프로젝트에서 지원할 브라우저의 범위를 명시하는 용도로 Autoprefixer 패키지에서 활용됨
• "> 1% : 전세계에서 점유율이 1퍼센트 이상인 모든 브라우저
• last 2 versions : 해당 브라우저의 마지막 2개 버전까지는 지원을 하겠다.

postcss 파일 구성

• .postcssrc.js
  • 파일 이름 앞에 . 붙는 것 -> 구성 옵션 및 숨김 파일을 의미함
  • rc(Runtime Configuration) 붙은 파일은 구성 파일을 의미함
• 해당 파일안에서 postcss가 제공하는 플러그인인 autoprefixer를 연결
• postcss의 경우 nodeJS 환경임
  • 브라우저 환경 -> ESM
  • nodeJS 환경 -> CommonJS
  • CommonJS 문법의 import, export 규칙을 사용해야 함
    • require module.exports 사용

// ESM
// import autoprefixer from 'autoprefixer'

// CommonJS
const autopreixer = require("autoprefixer");

// ESM
// export {
//   plugins: [
//     autopreixer
//   ]
// }

// CommonJS
module.exports = {
  plugins: [autopreixer],
};

// 간소화 (require, export 한번에 사용)
module.exports = {
  plugins: [require("autoprefixer")],
};

postcss, autoprefixer 호환 문제

• 에러메세지 발생시 검색해 볼것
  • 보통 autoprefixer 10버전 , postcss 8버전과 마찰이 있음
  • autoprefixer 다운그레이드 필요 npm i -D autoprefixer@9 (9버전)

TEST

• 시범적으로 dispaly: flex;를 입력하고 서버 오픈해서 브라우저 dev tool로 확인

Babel

• 2015년 이후 나온 버전 신 ES6, ES7, ES8
• 2015년 이전의 구버전 ES5
• 최신의 버전 JS 문법, 기능을 구형의 브라우저 사용자를 위해서 ES5로 변환 시켜줌

설치

• npm i -D @babel/core @babel/preset-env
• .babelrc.js 파일 생성 -> preset-env연결

module.exports = {
  presets: ["@babel/preset-env"],
};

• babel도 postCSS 처럼 JSON package 파일에서 browserslist 속성을 참조하기 때문에 만약 postCSS에서 사용했다면, 내용만 확인하고 없다면 작성이 필요함

{
  "browserslist": ["> 1%", "last 2 version"]
}

TEST (비동기 문법 test)

• async, await 키워드 test -> 개발 서버 실행

console.log("hello parcel!");

async function test() {
  const promise = Promise.resolve(123);
  console.log(await promise);
}

test();
// Reference Error 발생

• async, await 비동기 문법의 경우 setting을 해줘야 함
  • npm i -D @babel/plugin-transform-runtime 으로 바벨 플러그인 패키지 설치
  • babel 파일에서 플러그인 연결

module.exports = {
  presets: ["@babel/preset-env"],
  plugins: [["@babel/plugin-transform-runtime"]],
};

• 개발서버 실행하고, 함수가 정상적으로 작동하는지 확인

---

Webpack

프로젝트 생성

• npm i -D webpack webpack-cli webpack-dev-server@next
  • cli 와 dev-server는 버전을 일치시켜줘야 해서 @next를 써줌
  • parcel bundler와 달리 Webpack은 cli 기능과 dev server 기능의 패키지를 분리해 놨기 때문에 다운 받아야 사용 할 수 있음
• webpack-dev-server : 수정사항 반영 갱신을 위한 HMR 기능
• webpack-cli : webpack의 cli 기능을 사용하기 위한 패키지
• package json scripts 작성

{
  "scripts": {
    "dev": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  }
}

구성 옵션 파일 작성 (webpack.config.js)

• parcel의 경우 구성 옵션을 제공할 필요 없지만, webpack에서는 구성 옵션을 제공해줘야 함
• webpack.confing.js
• 디테일한 구성 옵션으로 프로젝트를 컨트롤 할 수 있음
• 해당 파일은 nodejs 환경에서 동작 함

entry 옵션

• : 파일을 읽어들이기 시작하는 진입점 설정 (parcel index.html과 같은 것)
• webpack의 경우 html을 진입점으로 하지 않고 js를 진입점으로 함
• webpack official site : entry
• 객체 값을 넣어 여러개의 집입점을 넣을 수도 있음

output 옵션

• : 결과물(번들)을 반환하는 설정 ({} 객체 형태의 값으로 옵션들을 넣음)

Path

• path: '경로'
• : 어떠한 경로에 결과물을 넣어줄지
• (상대경로 안되고, 무조건 절대 경로로 넣어주어야 함)
• default 값 : dist 폴더 경로
• 경로를 지정하는 팁
  • path : node에서 제공하는 전역 모듈이 있음
    • resolve() : 첫번째 인자와 두번째 인자의 경로를 합쳐줌
  • __dirname : node에서 제공하는 전역 변수로 해당 코드가 쓰인 파일의 현재 경로를 나타냄

const path = require('path');
module.exports = {
  output: {
    path: path.resolve(__dirname, "dist");
  }
}

filename

• filename: '파일 이름'
  • : 번들로 만들어 합쳐지는 결과 파일의 이름 설정
  • default 값 : entry의 파일 이름

clean

• clean: true
  • : 기존의 결과들을 없애고 build 한 파일을 넣음
  • dry, keep 등의 다양한 옵션을 사용해서 더 디테일하게 다룰 수 있음

예시

const path = require("path");
module.exports = {
  entry: "./js/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
    clean: true,
  },
};

html로 개발서버 오픈하기

• npm i -D html-webpack-plugin 으로 해당 플러그인 설치
• plugins 속성 세팅 -> npm run dev -> 개발 서버 열기
• 개발 서버를 오픈하기전 favicon을 넣어 놓아야 함 (error 메세지 뜨기 때문)

const path = require("path");
const HtmlPlugin = require("html-webpack-plugin");
module.exports = {
  entry: "./js/main.js",
  output: {
    // path: path.resolve(__dirname, 'dist'),
    // filename: 'main.js',
    clean: true,
  },

  // 번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정
  plugins: [
    new HtmlPlugin({
      template: "./index.html",
    }),
  ],
  // 개발서버 host 출력부분 제어
  devServer: {
    host: "localhost",
  },
};

정적 파일 연결하기

• static 폴더 안의 폴더 및 파일들을 dist로 copy 함
• npm i -D copy-webpack-plugin 설치
• webpack.config.js 에서 세팅 및 연결
• plugins에 넣을 때 patterns 에 from에 변환할 경로 폴더를 넣으면 됨

const path = require("path");
const HtmlPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  entry: "./js/main.js",
  output: {
    // path: path.resolve(__dirname, 'dist'),
    // filename: 'main.js',
    clean: true,
  },

  // 번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정
  plugins: [
    new HtmlPlugin({
      template: "./index.html",
    }),
    new CopyPlugin({
      patterns: [{ from: "static" }],
    }),
  ],

  devServer: {
    host: "localhost",
  },
};

• html에서 img 요소에 src 경로를 넣을 때 어차피 변환시킬때 dist로 가고 static이라는 폴더를 거치지 않기 때문에 dist를 root로 생각하고 작성 하면 됨

<img src="./images/logo.png" alt="logo" />

CSS 파일 관리

방법01 (정적 파일 연결 방법)

• css 폴더의 css 파일도 static에 넣어 build 될때 dist로 올라가서 관리 가능함

방법02 (css 읽을 수 있는 라이브러리 활용, css-loader, style-loader)

• 이러한 방법 말고, static 밖에 CSS 폴더를 두어 entry에 설정된 main.js 파일에 import를 통해서 CSS 파일을 연결 시켜 main.js가 읽힐때 css파일도 같이 내어 줄수 있음 (webpack은 css를 읽을 수는 없음)

import "../css/main.css";
console.log("webpack!");

• CSS를 읽을 수 있는 패키지가 존재
  • npm i -D css-loader style-loader
  • css-loader : JS에서 CSS를 해석하는 용도
  • style-loader : 해석된 CSS를 html의 style 태그에 삽입해주는 역할

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

• module에 rules에 test에는 정규표현식으로 .css로 끝나는 파일들을 의미하고
  • use 에는 test에서 의미하는 파일들에 적용할 패키지를 의미함

SCSS 파일 관리

• SCSS를 연결하고 해석하려면 sass-loader와 sass 패키지가 필요함
  • npm i -D sass-loader sass
• js import 연결 이름, 경로 수정

import "../scss/main.scss";
console.log("webpack!");

• test의 대상 파일 정규 표현식을 수정해줘야 함 scss, css 파일 모두 찾아서 읽을 수 있게 함
• use에 sass-loader를 넣어주는데 순서가 중요함 style - css - sass

module.exports = {
  module: {
    rules: [
      {
        test: /\.s?css$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
};

webpack으로 autoprefixer 연결하기

• npm i -D postcss autoprefixer postcss-loader

• postcss

• autoprefixer

• postcss-loader

• sass - postcss - css - style -> html 로 보냄

• 그래서 use 순서가 중요함

module.exports = {
  module: {
    rules: [
      {
        test: /\.s?css$/,
        use: ["style-loader", "css-loader", "postcss-loader", "sass-loader"],
      },
    ],
  },
};

• package json에 browserslist 추가하기

{
  "browserslist": ["> 1%", "last 2 versions"]
}

• .postcssrc.js 만들기

module.exports = {
  plugins: [require("autoprefixer")],
};