front-end 국비과정 일차 25일차 학습일지 JS:bundler(webpack,parcel)

--- bundler ---

parcel-bundler : 
1 구성 없는 단순한 자동 번들링
2 소/중형 프로젝트에 적함

webpack:
1 매우 꼼꼼한 구성
2 중/대형 프로젝트에 적합

---

--parcel-plugin-static-files-copy---

1parcel-bundler를 사용하여 개발 서버를 열때 dist에 있는 파일이 브라우저에 렌더링 되는데 ico파일 같은 이미지를 추가할 때
dist폴더에 해당 이미지가 존재해야 브라우저에 렌더링 된다  

2이때 우리는 매번 dist폴더에 이미지를 복사 붙여넣기 할 수 없기때문에 parcel-plugin-static-files-copy라는 npm 라이브러리에 도움을 받을 수 있다.

parcel-plugin-static-files-copy란? 
프로젝트에 이미지나 기타 파일들이 추가될때 parcel-plugin-static-files-copy로 연결된 폴더안에 파일을 dist폴더에 복사 붙여넣기 해주는 라이브러리이다

설치법과 사용법
1parcel-plugin-static-files-copy은 개발용 의존 패키지(브라우저에선 동작하지않는 패키지)이기 때문에 
터미널 에서 npm i -D parcel-plugin-static-files-copy 라고 명시한다

2 package.json에 staticFiles와 staticPath를 명시한다 staticPath는 dist파일로 연결될 폴더 이름이다
ex)

"staticFiles": {
    "staticPath": "images"
  }
"webpack-dev-server --mode development"
"webpack --mode production"

JS의 문법 ECMAScript의 버전이 높아지면서 구형 브라우저에서는 최신의 ECMAScript의 버전이 동작하지 않기때문에
최신의 ECMAScript의 버전을 구형 브라우저에서도 동작가능한 ECMAScript의 버전으로 컴파일(변환)해 주는 라이브러리 이다.

CLI(Command Line Interface) 
터미널에서 사용하는 명령어를 의미한다 


--- Webpack ---
Webpack을 사용하기 위해선 3가지의 npm라이브러리를 요구한다
1webpack: 번들러 기능을 제공하는 라이브러리이다
2webpack-cli: webpack에서 사용하는 CLI(commandLineInterface) 즉 명령어를 제공하는 라이브러리이다
3webpack-dev-server: webpack으로 번들된 content를 확인 할 수 있는 서버를 제공한다 npm으로 다운받을때 뒤에 @next를 붙여야한다.
3-1 webpack으로 서버를 오픈하기위해선 따로 webpack.config.js라는파일을 만들어 내용을 작성 해 줘야한다

ex)
 

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

이때 script에 webpack-dev-server --mode development , webpack --mode production은 webpack-CLI가 없으면 실행되지않는다
또한 dev라는 key는 다른 이름을 사용하더라도 무방하다

Webpack.config.js 작성법
1 Webpack.config.js는 환경이 node.js이기 때문에 파일 수출시 module.exports라고 명시해야한다
2 webpack이 번들작업을 실행할때 entry와 output이라는 명령어를 사용한다

entry: webpack이  프로젝트 파일을 해석하는 진입점이다 즉 webpack이 번들작업을 할때 처음으로 해석하는 파일이다 주로 상대경로를 명시한다 entry는 여러개 작성 가능하다

output: entry에서 명시한 파일과 연결된 파일을 번들작업하는 명령어이다
이때 path와 filename이라는 속성을 사용한다
path : 번들한 결과물을 반환받을 경로이다. 경로는 절대경로만 사용가능하다 이때 node.js에 문법으로 절대경로를 따로 만들어줘야한다
filename : path로 작성된 경로에 번들한 결과물을 받환받을 파일에 이름이다 번들작업이 끝나면 path에 명시된 경로에 filename에 명시한 이름으로 번들 결과를 반환한다.
ex)

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'
    })
  ]
}
"dev": "webpack-dev-server --mode development",
    "build": "webpack --mode production"