webpack 프론트엔드 필수 개발환경 셋팅

webpack은 다양한 모듈들을 하나의 js파일로 만들어줌
여러개의 파일을 하나의 파일로 만들어주는게 webpack의 역할

npm init 명령어로 노드 프로젝트 시작
(* -y를 붙이면 모든 질문에 Yes라는 뜻)
-> package.json 이 생김

webpack 설치
npm install webpack-cli --save-dev
install => i
--save-dev => -D : 개발용설치(devDependencies)

설정을 위한 파일 생성 : webpack.config.js

node에서 제공하는 path모듈을 활용
const path = require('path'); // 파일이나 폴더 경로작업 위한 루트제공

module.exports = {
   entry : './src/index.js', // 시작파일(사용하는 모듈들을 모두 파악)
   output :  {
     filename : 'main.js', // 만들어진 최종파일을 내보내는 옵션
     path : path.resolve(__dirname, 'dist'),
   }
}

webpack dev server

style-loader, css-loader

참고영상 : https://www.youtube.com/watch?v=zal9HVgrMaQ