밑에 작성한 내용들은 강의를 듣고 모르는 부분에 대해서 찾아가면서 작성한 내용이고, 나의 생각도 들어갔기 때문에 오류가 있을 가능성이 높다. 설명이 필요한 내용에 대해서 누락되거나 전혀 다른 내용을 말할 수도 있기 때문에 알아서 걸러들어야 한다. 하지만 그런 실수를 하지 않기 위해서 최대한 신경써서 정리를 할 거다.
패키지를 작업 폴더로 다운을 받을 때 보통 두 가지 방법이 있다.
1. npm i 패키지명
2. npm i -D 패키지명
각각의 의미는 배포 환경과 개발 환경으로 나뉜다.
다운을 받게 되면 각 모듈에 대한 정보들은 작업폴더 내 package.json에 기록된다.
프로젝트를 진행하기 위해서 다운로드 받은 패키지는 아래와 같다.
css-loader
자바스크립트 모듈 내에서 *.css 모듈을 불러올 수 있도록 해주는 로더
css-minimizer-webpack-plugin
cssnano를 사용해서 번들링 된 css 모듈의 용량을 최적화 시켜주는 플러그인
html-webpack-plugin
HTML 파일을 후처리하는데 사용하고, 빌드 타임의 값을 넣거나 코드를 압축할수 있는 써드 파티 패키지.
mini-css-extract-plugin
이 플러그인은 CSS를 별도의 파일로 추출하는 플러그인
webpack
한 단어로 표현하자면 모듈 번들링이라고 하는데, html 파일에 들어가는 다수의 자바스크립트 파일들을 하나의 자바스크립트 파일로 모아주는 역할을 해주는 도구
webpack-cli
webpack과 관련된 명령어를 사용할 수 있게 해주는 패키지
webpack-dev-server
Webpack은 HMR 및 오류 보고 기능이 있는 개발 서버를 제공하는데, 이 때 HMR은 다음과 같다.
빌드 대상 파일이 변경 되었을 때 매번 webpack 명령어를 실행하지 않아도 코드만 변경하고 저장하면 웹팩으로 빌드한 후 브라우저를 새로고침 해준다.
여기까지 기본적으로 개발을 도와주는 패키지 및 플러그인에 대해서 간략하게 알아봤다.
프로젝트를 생성하기 위한 명령어를 커맨드 창에 입력한다.
그리고 이번 가상 키보드를 제작하기 위한 패키지를 설치한다.
// -y 옵션을 추가함으로써 프로젝트를 기본 설정으로 생성한다.
npm init -y
// 위의 설명한 패키지들을 설치하는 명령어
npm i -D css-loader css-minimizer-webpack-plugin html-webpack-plugin mini-css-extract-plugin webpack webpack-cli webpack-dev-server
프로젝트를 만들면 위와 같은 폴더 구조가 만들어지게 된다. 또 package.json 파일에 들어가면 아래와 같이 위에서 설치한 패키지들이 devDependencies 내부에 작성돼 있는 것을 볼 수 있다.
// ./package.json
{
"name": "project1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
// production으로 지정하게 되면 파일 용량 등 최적화된 모듈은 dist 폴더에 출력된다
"build": "webpack --mode=production",
"dev": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^6.7.1",
"css-minimizer-webpack-plugin": "^4.0.0",
"html-webpack-plugin": "^5.5.0",
"mini-css-extract-plugin": "^2.6.1",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.10.0"
}
}
그 다음에는 모듈 번들링 기능과 기타 등등의 최적화 기능이 적용되도록 다음과 같은 코드를 작성한다.
// ./webpack.config.js
const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtrackPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
// webpack에게 다른 모듈을 사용하고 있는 최상위 모듈의 위치를 알려준다.
entry: "./src/js/index.js",
// webpack이 번들링한 모듈의 위치와 이름을 정해준다.
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "./dist"),
clean: true,
},
devtool: "source-map",
mode: "development",
// 개발을 편하게 도와주는 옵션
devServer: {
host: "localhost",
open: true,
port: 8080,
watchFiles: "index.html",
},
// loader가 할 수 없는 일을 대신할 목적, 웹팩 전체적인 과정에 개입가능
plugins: [
new HtmlWebpackPlugin({
// webpack에서 빌드 중에 아래 내용 중 title을 html 파일에 끼워넣는다.
title: "keyboard",
template: "./index.html",
inject: "body",
favicon: "./favicon.ico", // 이건 아무런 icon 다운로드 해서 최상위에 위치시키면 된다.
}),
new MiniCssExtrackPlugin({
filename: "style.css",
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtrackPlugin.loader, "css-loader"],
},
],
},
// html, css, js 등 여러가지 모듈의 최적화를 위한 옵션
optimization: {
minimizer: [new TerserPlugin(), new CssMinimizerPlugin()],
},
};마지막으로 프로젝트를 실행시키기 위한 폴더 및 파일을 생성하고 실행시켜보면 끝이다.
위와 같이 src 폴더와 js, css 파일을 추가하고, index.html 파일에는 다음과 같이 title 요소 내부에 작성해준다.
<!-- ./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><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
</body>
</html>지금까지는 js 파일을 사용하지 않았지만 나중에 쭉 사용하기 때문에 지금 작성해야겠다.
// ./src/js/index.js
// 현재 이 javascript 모듈은 웹팩에서 지정한 최상위 모듈이다.
// 웹팩은 번들링을 진행 중에 이 모듈에서 임포트 된 모든 모듈을
// 검사해서 dist 폴더에 bundle.js라는 파일로 출력시킨다.
import "../css/style.css"
console.log("hello")일단 여기까지가 개발 준비 과정이다.
나는 나를 못 믿기 때문에 이 프로젝트를 다시 이 블로그를 보면서 만들어봤다. 결과는 성공이다. 믿고 따라해도 된다.
아 중간에 favicon.ico만 잘 만들어 놓는다면 아무 문제가 없다.
'개발 > 프로젝트' 카테고리의 다른 글
| Project 1 : 가상키보드(4) - 개발 완료 (0) | 2022.08.26 |
|---|---|
| Project 2 : 이미지 슬라이더(1) - 개발 완료 (1) | 2022.08.24 |
| Project 1 : 가상키보드(3) - 개발 중간 완료 (0) | 2022.08.22 |
| Project 1 : 가상키보드(2) - 개발 진행 상황 (0) | 2022.08.22 |
