툴체인 맛보기

툴체인

1. Web pack 모듈 번들러를 명령어 환경에서 사용하기 위해 설치

npm i -D webpack webpack-cli

2. 번들 명령 (package.json파일에 web pack 번들링을 수행하는 bundle 명령어)

{
	"scripts": {
    "webpack:config": "webpack --target=browserslist --entry=./src/main.js --output-path=public",
    "webpack:dev": "npm run webpack:config -- --mode=development"
	}
}

3. .browserslistrc 루트에 작성해주기(Webpack 타겟 설정)
   broswerlist는 autoprefixer, babel,ESlint, PostCss 및 webpack과 같은 자바스크립트 도구에 대해 브라우저와의 호환성을
   구성해주는 파일이다!
   (https://browsersl.ist/)
   여기 사이트를 참고하여 적어주면 된다.

연습코드에는

> 0.5% in KR
// 한국의 5%를 가진 모든 버전
last 2 versions
// 각 브라우저의 마지막 2개 버전
not dead
ie 11
// ie11 제외

를 써줬다 프로젝트에 맞게 설정해주면 될 것 같다!
4. webpack 번들링 및 명령실행

npm run webpack:dev

아까 package.json script에 적어줬던 번들링 명령이다!
명령어를 수행하면 여러 모듈 파일이 한데 묶여 출력된다!
명령어 참고 사이트(https://webpack.js.org/api/cli/)
5. build 명령
번들링된 파일을 최적화하는 build 명령어!

{
	"scripts": {
    "webpack:config": "webpack --target=browserslist --entry=./src/main.js --output-path=public",
    "webpack:dev": "npm run webpack:config -- --mode=development"
		"webpack:prod": "npm run webpack:config -- --mode=production"
	}
}

npm run webpack:prod로 명령을 실행하여 묶인 모듈파일을 최적화