[Bundler] Webpack

• webpack-cli : cli에서 webpack을 사용할 수 있게 함

• 역시 명령어 등록해줘야 함 ⇒ “webpack”

• 웹팩을 사용하면, src/index.html에 main.js 스크립트를 가져오지 않아도 된다

webpack.config.js - webpack 옵션 파일

• NodeJS 환경에서 동작

• modules.exports로 옵션을 내보냄

• entry에서 진입점, output에서 변환된 파일 관련설정
• entry 파일을 번들링한 js파일을 output path에 생성

• npm i -D vue-loader : vue로더 설치

• npm i -D @vue/compiler-sfc : vue를 js로 해석하는 패키지 설치(vue버전과 같은지 확인)

• npm i -D html-webpack-plugin : html플러그인 설치, webpack을 실행할 때마다 진입 html도 같이 번들링 한다.

const path = require('path') 
// 경로에 관해 다양한 기능을 지원하는 NodeJS의 내장 모듈
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
//mode: 'production', //모드를 지정해주는 것은 명령어에서 하도록 함
	entry: './src/main.js', 
	output: {
		path: path.resolve(__dirname, 'dist') 
		// resolve로 두 경로를 합침 , 절대경로를 얻을 수 있음
		// (__dirname: 현재파일이 있는 위치를 가리키는 NodeJS의 전역변수 + 'dist': 폴더이름) == 보통 /dist
		// entry말고는 상대경로 대신에 지금처럼 절대경로로.
		clean: true // 웹팩 실행할 때, 폴더를 초기화 한다

		// filename 속성의 값을 지정해주지 않으면, entry의 파일 이름이 적용 된다
	},
	module: {
		rules: [
			{
				test: /\.vue$/, //정규표현식, test=> 해당 파일과 일치하는 파일을 찾음
				use: 'vue-loader' //vue파일을 불러옴. vue-loader 패키지 설치 필요
			}
		]
	},
	plugins: [
		new VueLoaderPlugin(), //생성자 함수로 플러그인 인스턴스 생성
		new HtmlWebpackPlugin({ //template 옵션으로 html파일 경로 명시
			template: './src/index.html' 
				// HtmlPlugin은 경로를 내부적으로 처리할 때 path.resolve를 실행하므로 상대경로로 써줘도 ㅇㅋ
				// 원래는 path.resolve(__dirname, 'src/index.html')
		})
	]
}

• npm run 명령어 로 실행 후 결과 html을 open live-server로 열면 결과를 볼 수 있다

• 사실 config파일에서 mode 옵션도 명시해줄 수 있지만, 두 모드 모두 지원해야 하므로 cli에 ‘—mode=모드’를 덧붙여 실행한다.
• webpack —mode=development : 코드 난독화x
• webpack —mode=production : 코드 난독화o
• 둘 다 한번 번들링되고 종료된다 ⇒ 코드를 수정할 때마다 번들링하려면 개발 서버 사용!!

개발 서버

• npm i -D webpack-dev-server : 개발 서버 패키지 설치

• webpack-dev-server —mode development 로 명령어 등록
• webpack-dev-server : 개발 서버 실행
• —mode development : 개발 모드로 webpack 실행
• 따라서, 프로덕션 번들링 명령어(webpack -mode=production)와 dev 번들링 명령어를 따로 설정(webpack-dev-server —mode development)해서, 개발모드일 때만 서버 실행
• webpack 명령어일 때만(즉, 여기선 프로덕션에서만) dist 폴더에 저장되는 것에 주의

• 이렇게 하면 Hot Module Replacement가 실행되어 저장할 때마다 번들링되고 브라우저가 자동으로 새로고침됨

• 포트 변경도 가능하다

...
devServer: { // 개발 서버 옵션을 추가할 수 있음
	port: 1234 //포트를 설정할 수 있음
}

vue파일에서 style 태그 사용하기

• 웹팩은 기본적으로 js만 알아봄. ⇒ css 내용도 해석하게 하자!

• css-loader, vue-style-loader, sass, sass-loader 설치

• 로더는 항상 webpack.config의 module에 추가한다.

..
modules: {
	rule: [
		..., 
		{
			test: /\.s?css$/, //.scss와 .css 파일이 모두 해당되게, 
			use: [
				'vue-style-loader',
				'css-loader',
				{
					loader: 'sass-loader',
					options: {
						additionalData: `
						@use "sass:color";
						@import "~/scss/_variables";
						` //sass를 적용하면 무조건 이 코드들을 맨 상단에 추가해줌
					}
				}
			]
		}
	]
}

• use 옵션에 배열을 설정한다면, 뒤에서 앞으로 해석된다.
• 따라서, 먼저 해석되어야 하는 로더를 뒤에 써준다
• sass-loader로 scss를 해석 > css-loader로 css를 해석 > vue-style-loader로 css를 html에 삽입해줌

<template> 
	<h1>컴포넌트 Hello</h1> //이 h1 태그에는 style hash가 붙어서 밑에 style이 여기에만 적용되게 함
</template>

<style scoped lang="scss">
	$color: orange;
	h1 { //template에 있는 h1에 style hash가 붙음
		color: royalblue;
	}
</style>

• style 태그 속성으로 scoped를 붙여줘야 지금 이 컴포넌트에서만 style이 적용.
• 아니면 다른 컴포넌트에도 영향을 미침
• scoped style의 태그들에는 style hash가 붙음
 

<template>
	<h1>최상위 컴포넌트 App</h1>
	<Hello /> 
// 태그의 Content가 없기 때문에 빈태그
</template>

<script>
	import Hello from '~/components/Hello.vue' //다른 컴포넌트를 import

	export default {
		data() {..},
		components: {
			Hello
		}
	}

</script>

• @vue/compiler-sfc 패키지를 통해, 지금처럼 다른 컴포넌트를 html 템플릿에서 쓸 때 대시케이스가 아닌 카멜케이스로 쓸 수 있다 <hello /> → <Hello />

• default 내보내기는 익명함수여도 된다.
⇒ 후에 아무 이름으로 import 수 있음 (ex. import App from ‘./App.vue’)

확장자 생략, 경로단축기

• resolve 속성 (객체형태)
• extensions속성 : 확장자 값들의 후보들을 명시. 이로 인해 확장자 이름을 생략할 수 있음
• alias 속성 : 특정한 절대 경로의 단축키를 지정

..
module.exports = {
	resolve: {
		extensions: ['.vue', '.js'] //import하는 모든 파일은 이 확장자들 중 하나임
		alias: {
			'~': path.resolve(__dirname, 'src') //즉, ~/ 는 /src/가 된다
		}
	},
..

favicon (브라우저의 타이틀 옆에 아이콘)

const CopyPlugin = require('copy-webpack-plugin')
..
plugins: [
		...
		new CopyPlugin({
			patterns: [ //from 폴더에서 to 폴더로 복붙
				//{from: '', to: 'dist'} //to는 기본적으로 output 옵션값이 되기 때문에 여기선 생략 가능
				{from: 'static'} //웹팩 실행 시 static 폴더를 dist 폴더로 복붙한다
			]
		})
	]
}

• 보통 html에서 favicon이 지정되어 되어 있지 않으면, 주변 파일에서 favicon.ico 파일을 찾게된다

• npm i -D copy-webpack-plugin : 파일이나 폴더를 복붙할 수 있게 함(보통 개발용에서 배포용으로 파일 복붙)

• 원하는 icon 파일을 favicon.ico 라는 이름으로 from 폴더에 저장시키면, 이 플러그인을 통해 배포용 폴더에 복붙된다

ESLint, Prettier

1. eslint, eslint-plugin-vue 패키지 설치

2. .eslintrc.json에서 설정

{
	"env": {
		"browser": true, //DOM객체(window, document 객체 등)을 eslint가 알도록 한다
		"node": false //ReactJS(require, module, __dirname 등)을 eslint가 알도록 한다
	},
	"extends": [
		"eslint:recommended", //JS 추천 기본규칙을 씀, eslint패키지
		"plugin:vue/vue3-recommended" //vue 추천 규칙 씀, eslint-plugin-vuevozlwl
	],
}

1. vscode의 eslint 확장 프로그램 설치

2. settings.json 파일에 “editor.codeActionsOnSave” 옵션으로 source.fixAll.eslint:true 라는 설정 추가
⇒ 파일을 저장할 때마다 eslint로 자동 수정된다
 

• extend 규칙 외에도 내가 직접 규칙을 지정할 수도 있다
• rules ⇒ 세부 규칙을 지정. 이 규칙이 extend한 규칙보다 우선시 됨
ex)

"rules": {
		"semi": ["error", "never"], //코드 끝에 세미콜론이 붙지 않게하는 규칙
		"quotes": ["error", "single"], //따옴표는 작은 따옴표만 허용하는 규칙
		"vue/html-closing-bracket-newline": ["error", { //vue에서 닫는 꺽쇠의 줄바꿈처리 규칙
			"singleline": "never", //한줄일 때 줄바꿈x
			"multiline": "never" //여러줄일 때도 줄바꿈x
		}], 
		"vue/html-self-closing": ["error", { //content가 없을 때 빈태그로 만드는 규칙
				"html": {
					"void": "always", // 원래 빈태그일 때 -> 빈태그
					"normal": "never", // 그 외 태그 -> 빈태그 아니게
					"component": "always" // 컴포넌트 태그 -> 빈태그
				},
				"svg": "always", 
				"math": "always" 
			}],
		
	}