Parcel && Webpack 사용해보기

Parcel

parcel은 모듈 번들러이다.
번들러 - 무엇인가로 묶음처리를 한다.
즉, parcel이라는 묶음 처리를 해주는 친구가 우리의 프로젝트를 브라우저에서 동작할 수 있는 파일들로 처리를 해서 묶어서 내보내기를 해준다.

parcel 번들러 설치

npm i -D parcel

이렇게 parcel은 설치하고 진입점만 잘 설정해주면 끝이다.

// package.json에서 
"scripts": {
    "dev": "parcel ./src/index.html" // 진입점 설정
},

이렇게 설정을 하고 npm run dev로 실행을 하면 parcel에서 dist라는 폴더가 자동으로 생성해주는데 parcel 번들러가 우리가 편하게 사용할 수있는 vue라는 확장자가 가지고있는 파일을 해석해서 실제로 브라우저에서 동작할수있는 자바스크립트로 변환해서 그 내용을 출력하게 해준다. 그 파일들이 dist에 담겨있다. 실제로 배포할 때는 dist에 있는 파일들을 배포하면된다.
dist 또한 다시 생성할수 있기에 github저장소에 올릴 필요가 없다.
.gitignore에 넣어버려!~~
이럴 때는 브라우저가 해석하는 용도로 build라는 스크립트를 사용한다.

// package.json에서 
"scripts": {
    "dev": "parcel ./src/index.html" 
	"build": "parcel build ./src/index.html"
},

parcel 번들러를 사용하면 설치할 패키지나 구성옵션들을 신경쓰지 않고 최소한의 노력으로 하나의 프로젝트를 시작할 수 있지만 단점으로는 아주 세밀한 번들러 제어는 어렵다.(아주 세밀한 번들러 제어는 webpack에서 알아보자! ! !)

---

Webpack

webpack 또한 하나의 진입점을 통해서 묶음처리를 해준다.
webpack.config.js 파일에서 옵션들을 직접 지정해줘야 한다.

nodejs의 기능인 require로 path 가져온다. path는 nodejs에 내장모듈이다.
module.exports는 nodejs의 내보내기
webpack.config.js파일 내에서 경로를 지정하는 부분은 path.resolve 메소드를 사용하는 것이 아주 중요하다.
1. entry 진입점 설정
2. 어디에 출력될것인지는 output: { path } 는 nodejs에서의 경로를 해석하는 용도 __dirname은 nodejs에서 사용가능한 전역변수이다.(현재 경로)
3. 작성하지는 않았지만 만약 filename을 생략하게 되면 entry 진입점 포인트를 따라가기에 꼭 filename을 작성할필요는 없다.

npm i -D webpack webpack-cli
cli: 커맨드라인 인터페이스의 약어이다. 터미널에서 입력하는 내용들을 의미한다.

번들처리 => src폴더에 들어있는 bar.js와 main.js를 하나로 합쳐서 dist폴더의 main.js로 묶음처리 해서 한번에 반환할 수 있다.
즉, 우리는 여러개의 파일들로 모듈화시켜서 개발을 조금 더 편리하고 풍성하게 할수 있는 것이고 그것이 웹에서 온전하게 동작하게 해주기 위해서 webpack과 parcel같은 번들러를 통해서 브라우저에서 동작할수있는 결과를 만들어서 그 결과만 브라우저에서 동작 시켜준다.

---

웹팩같은 경우는 자바스크립트만 해석이 가능하다. 그러므로 .vue 해석하지 못한다.
그럴 때는 웹팩에 loader라는 옵션을 추가해줘야한다.

vue-loader 라는 패키지를 설치하자.
vue 파일을 loader해서 해석을 할수 있게 도움을 주는 패키지이다.

`npm i -D vue-loader@next` 설치(@next: 3버젼)

이렇게 설치하고 실행하면 될거 같지만 되지 않는다....
왜냐하면 vue-loader는 웹팩 내부에서 vue라는 확장자를 가지고있는 파일들을 가지고와서 읽을 준비만하는 것이다. 실제 내용을 읽으려면 그것들을 해석할수있는 패키지를 설치해야한다. 그 패키지가 바로 npm i -D @vue/compiler-sfc를 설치하면 된다. .....근데 또 에러가 뜬다...
이유는 기본적인 사용법이 구성이 안되서 그렇다 이것은 webpack.config.js에서 설정해줘야한다.

이렇게 하면 작성해주고 실행은 되지만 웹팩에 "mode" 옵션을 제공을 해줘야한다. 이럴 때는 package.json에서 밑에 처럼 작성해줘야한다.

// package.json에서 
"scripts": {
	"build": "webpack --mode production"
},

이때 dist폴더를 보면 main.js는 잘 변환되었지만 html파일은 변환되긴 커녕 아예 들어있지않다. 이때 필요한것이 html 웹팩 플러그인이다. npm i -D html-webpack-plugin을 설치하고 webpack.config.json에 추가해준다.

웹팩 플러그인

위 사진 처럼 webpack-plugin과 관련된 설치는 위와 같이 const HtmlPlugin = require('html-wepack-plugin') 처럼 webpack.config.json 상단에 작성해주고 plugins 부분을 작성해주면 적용이 된다.

최종 배포 하기전 즉, 결과물을 낼 때는 output 부분에 clean: true를 주어서 dist폴더를 체크한다.

npm i -D webpack-dev-server 설치하면 개발에 필요한 서버를 사용할 수 있다.
이렇게 하면 우리의 프로젝트가 코드만 수정해도 바로 브라우저에 내용이 반영된다.
이런것을 Hot Module Replacement 라고 부른다 줄여서 HMR ! ! !
이럴 때도 밑에 처럼 mode 설정을 해주자 !

개발 서버 포트 번호 또한 바꿀수있다.

// webpack.config.json
devServer: {
	port: 1234
}

이렇게 작성해주면 포트번호 1234로 개발서버를 실행된다.

웹팩은 자바스크립트 내용만 해석할 수 있긴때문에 vue-loader를 설치한것처럼 css와 sass도 해석할 수 있게 설치해줘야한다.
npm i -D css-loader vue-style-loader
npm i -D sass sass-loader
설치한 loader들을 webpack.config.json rules 부분에 작성해준다.
이때 작성하는 순서가 중요하다.
왜냐하면 기본적으로 아래에서부터 위로 평가가된다. 한마디로 제일 먼저 평가가 되어야하는것을 제일 마지막에 작성한다! ! !

// webpack.config.json
rules: [
	{
		test: /\.s?css$/,
		use: [
			'vue-style-loader',
			'css-loader',
			'sass-loader'
		]
	}
]

프로젝트가 커질수록 상대 경로보다는 절대경로를 쓰는것이 좋다. 경로별칭을 이용하자!
경로별칭을 사용하면 특정한 절대적인 위치부터 파일들을 찾아갈 수 있다. 유지보수에 좋다!

// webpack.config.json
module.exports = {
	resolve: {
			alias: {
			'~': path.resolve(__dirname, 'src')
		}
	}
}

이렇게 작성하면 앞으로 밑에처럼 사용가능하다. 주로 ~, @ 별칭을 사용한다.

import Hello from "./components/Hello.vue"
import Hello from "~/components/Hello.vue"

확장자 또한 생략해주는 웹팩 기능을 이용해보자

// webpack.config.json
module.exports = {
	resolve: { // 이렇게 하면 확장자 생략가능
			extensions: ['.vue', '.js'], // .vue, .js 생략가능 !

import Hello from "./components/Hello"

웹팩에서 favicon 추가하는 방법
dist 파일에도 파비콘 파일을 추가해야한다. 그러기 위해서는 npm i-D copy-webpack-plugin을 사용해서 정적 파일들을 복사해주면 프로젝트 구조로 넣어줄수있다.

// webpack.config.json
const CopyPlugin = require('copy-webpack-plugin')
.....
.....
plugins: [
	new CopyPlugin({
		patterns: [
			{ from: 'static'}
		]
	})
]

이렇게 작성하고 root 경로에 static 폴더를 만들어 안에 favicon.ico를 넣어준다.
ico 파일은 브라우저에서 icon파일을 가지고 있는 것을 의미한다.
ico 파일을 사용하면 브라우저에 index.html에서 파비콘이 지정되어있지 않을 때 주변에서 파비콘이라는 이름의 ico라는 파일을 자동으로 찾아준다. 그래서 우리가 따로 index.html 파일에 파비콘을 추가해줄 필요가 없다.