WebPack 생성하기(1)

• webpack생성하기

• ./ => 상대경로다

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 파일을 생성해줍니다.

• package.json 파일을 열어서 scripts 설정을 해줍니다

• 원래 서버를 실행시킬때는 webpack-dev-server라고 실행해야하지만
• 위의 scripts설정을 통해서 간단하게 development(개발모드) 서버를 구동시킬수 있다.
• bulid 또한 사진과 같이 만들수 있다 (production: 제품모드)

index.html 만들기

• 해당 파일의 root 부분에서 index.html만듭니다.
• reset-css link를 가져옵니다

<!--reset-css란 기존 브라우저가 가지고있는 스타일들을 모두 초기화 시켜준다-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css">

webpack.config.js 설정하기

• 3번줄 :
  require('path') 는 nodejs에 포함되어있는 모듈입니다.

• __dirname은 현재 있는 그파일의 경로를 말한다.

• 정리하면 ./js/main.js와 연관된 모든 파일들을

• path 로 설정한 경로로 main.js로 모듈화 해서 출력해준다는 의미입니다

• dist는 default경로 명입니다.
• 빌드하고자 하는 js이름 그대로 따라나가 출력해주는 게 default입니다.
  (예) main.js => build => /dist/main.js 로 출력

webpack.config.js 개발서버 open하기 (plugins)

// -D 개발자 모드
// 개발서버 open하기 위한 패키지 다운로드
npm i -D html-webpack-plugin

npm run dev

• 이렇게 실행되는걸 알수 있다

정적 파일 연결하기

npm i -D copy-webpack-plugin // 정적 파일 연결에 필요한 패키지

• 내가 만든 static을 연결시켜주는 패키지 설치후 아래 사진과같이 설정해준다
• 정적 파일들이 copy되서 dist폴더로 넘어가게 해주는 패키지 입니다.

• npm run build 시켜서 확인해보면
• image, js, html 파일들이 모두 dist로 출력되어있는것을 볼수있다

npm i -D css-loader style-loader // css,stylesheet 읽어주는 패키지를 다운받는다

webpack.config.js 설정