프로젝트 생성
Start the project
webpack-bundler에 대해 잘 학습할 수 있도록 하기 위해 실제로 프로젝트를 생성해줍니다.
1.1 패키지 설치
npm을 통해 package.json 파일을 생성하고 webpack 패키지 3가지를 설치해줍니다.
$ npm init -y
$ npm i -D webpack webpack-cli webpack-dev-server@nextwebpack
bundler가 동작하기 위한 핵심적인 패키지
webpack-cli
CLI, 커맨드 라인 인터페이스를 제공하는 패키지
webpack-dev-server
dev 명령을 통해 개발 서버를 오픈할 때 개발에 특화되어 패키지를 새로고침해줄 수 있는 구조로 만들기 위한 패키지
1.2 package-json 파일
package-json 파일을 오픈하여 script 내에 아래와 같이 webpack을 이용하여 개발을 할 수 있도록 합니다.
"scripts": {
"dev": "webpack-dev-server --mode development",
"build": "webpack --mode production"
},1.3 index.html
index.html 파일과 main.scss, main.js 파일을 연결시켜줍니다. 그리고 CSS를 초기화시켜주기 위해 reset css mdn으로 구글 검색하여 나온 아래 링크를 SCSS 링크 태그 위에 코딩해줍니다.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<!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>Hello Webpack!</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<link rel="stylesheet" href="./scss/main.scss">
<script defer src="./js/main.js"></script>
</head>
<body>
<h1>Hello Webpack!!</h1>
</body>
</html>1.4 webpack.config.js 파일 생성
webpack을 통해 개발 서버를 오픈하기 위해 구성 파일을 생성해야 하며, 루트 경로에 webpack.config.js 파일을 생성해주시면 됩니다. webpack은 구성 옵션을 직접 작성해야 하며, 이러한 상세한 구성 옵션을 통해 훨씬 더 프로젝트를 세세하게 다룰 수 있습니다.
Life is a matter of a direction not a speed.