./ => 상대경로다
npm init -y
npm i -D webpack webpack-cli webpack-dev-server@next
i -D (설치한다. -D 개발성 의존으로)
webpack (webpack 패키지를 설치)
webpack-cli, webpack-dev-server 두개의 패키지를 설치한다는 의미
@next 란? (webpack-cli와 webpack-dev-server 패키지 두개의 버전을 맞춰서 설치하기 위해서 붙이는 것입니다)
한번에 총 세개의 패키지를 설치
(먼저 프로젝트를 만들 폴더에서 visualstudiocode 터미널을 열어야합니다)
init을 통해서 package.json 파일을 생성해줍니다.
<!--reset-css란 기존 브라우저가 가지고있는 스타일들을 모두 초기화 시켜준다-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
3번줄 :
require('path') 는 nodejs에 포함되어있는 모듈입니다.
__dirname은 현재 있는 그파일의 경로를 말한다.
정리하면 ./js/main.js와 연관된 모든 파일들을
path 로 설정한 경로로 main.js로 모듈화 해서 출력해준다는 의미입니다
// -D 개발자 모드
// 개발서버 open하기 위한 패키지 다운로드
npm i -D html-webpack-plugin
npm run dev
npm i -D copy-webpack-plugin // 정적 파일 연결에 필요한 패키지
npm i -D css-loader style-loader // css,stylesheet 읽어주는 패키지를 다운받는다