Bundler[Webpack] - 프로젝트 생성

01.패키지 설치 & 확인

$ npm init -y
$ npm i -D webpack webpack-cli webpack-dev-server@next
  • npm을 통해 package.json 파일을 생성하고 webpack 패키지 3가지를 설치해줍니다.
  • webpack: bundler가 동작하기 위한 핵심적인 패키지
  • webpack-cli: CLI, 커맨드 라인 인터페이스를 제공하는 패키지
  • webpack-dev-server: dev 명령을 통해 개발 서버를 오픈할 때 개발에 특화되어 패키지를 새로고침해줄 수 있는 구조로 만들기 위한 패키지

package.json 파일

"devDependencies": {
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.0.0-rc.1"
  }
  • 해당 내용이 package.json 파일에 명시되어 있으면 성공적으로 패키지들이 잘 설치된 것 입니다.

02.package-json 파일 설정

"scripts": {
    "dev": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  },
  • package-json 파일을 오픈하여 script 내에 webpack을 이용하여 개발을 할 수 있도록 설정 해줍니다.
  • webpack-dev-server --mode development: 개발 모드
  • webpack --mode production: 제품 모드

03.index.html 파일 설정

  • CSS를 초기화시켜주기 위해 reset css mdn으로 구글 검색하여 해당 코드를 넣어 줍니다.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css">

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css">
</head>
<body>
    <h1>Hello Webpack!</h1>
</body>
</html>

04.webpack.config.js 파일 생성

  • webpack을 통해 개발 서버를 오픈하기 위해 구성 파일을 생성해야 하며 루트 경로에 webpack.config.js 파일을 생성 합니다.
  • webpack은 구성 옵션을 직접 작성해야 하며 이러한 상세한 구성 옵션을 통해 훨씬 더 프로젝트를 세세하게 다룰 수 있습니다.
  • webpack은 작은 규모의 프로젝트보다는 큰 프로젝트에서 유용한 패키지 입니다.
[알고리즘] Java / 백준 / 끝나지 않는 파티 / 11265
[BOJ]2667_단지번호붙이기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage