처음으로 프로젝트의 처음부터 작성하고, 세팅하는 과정을 거친다.
node.js 와 npm을 기본으로 설치하고, 크롬 브라우저를 기본적으로 이용한다.
webpack 설치
우선 webpack을 먼저 설치한다.
npm i -D web pack web pack-cli web pack-dev-server
여기서 -D는 내부 디펜던시의 패키지를 설치하겠다는 뜻으로 로컬 개발이나 테스트에만 필요한 패키지이다.
강의가 시키는 대로 설치했지만 설치가 되지 않는다. 구글링을 통해 설치하였고 그 과정은 이러하다.
npm init
npm install webpack webpack-cli --save-dev
npm install --save-dev webpack-dev-server
이후 src 폴더에 css폴더를 만들고 내부에 style.css 파일을 만든다
이후 js폴더에 index.js파일을 만든다
그리고 최상위 경로에 webpack.config.js 파일을 생성하고 내부를 작성한다.
const path = require("path");
module.exports = {
entry: "./src/js/index.js", //자바스크립트 파일의 진입점
output: { //빌드 했을때 번들파일 관련 속성
filename: "bundle.js",
path: path.resolve(__dirname,"./dist"), //번들파일 생성 경로
clean:true //번들파일이 생성될 경로에 이미 다른파일들이 있다면 그것을 지우고 다시 새로 생성하는 속성
},
devtool: "source-map", //빌드한 파일과 원본파일을 서로 연결
mode: "development"
}패스에는 상대경로를 적지 않고, 패스라는 모듈을 불러와서 리졸브라는 메소드를 사용하고 __dirname을 통해 절대경로를 찾을 수 있게 설정한다.
이후 npm i -D terser-webpack-plugin
플러그인을 설치한다.
플러그인 설치 후 플러그인 추가부분을 작성한다
devtool: "source-map",
mode: "development",
optimization:{
minimizer:[
new TerserWebpackPlugin()
]
}그리고 npx webpack 실행했으나.. 오류가 발생하여 처음부터 다시 세팅한다.
우선 node.js설치를 하였으며 npm을 재설치 하였다. 이후 yarn 설치.
brew을 최신버전으로 업데이트 한 후, node.js 와 npm을 강의버전과 동일하게 설치한 후 해결
index.html 파일을 최상위 경로에 생성한다.
<!DOCTYPE html>
<html lang="en">
<head> </head>
<body></body>
</html>
위의 내용을 입력하고, CSS와 html 파일을 설정해줄 모듈들을 설치한다.
npm i -D html-webpack-plugin //html 플러그인 설치
npm i -D mini-css-extract-plugin css-loader css-minimizer-webpack-plugin //css 플러그인 설치
이후 webpack 설정파일에 추가로 설정값 입력
const HtmlWebpackPlugin = require("html-webpack-plugin")
plugins:[
new HtmlWebpackPlugin({
title: "keyboard", //인터넷 프라우저의 이름을 나타냄
template: "./index.html", //템플릿 상대경로
inject: "body", //빌드한 자바스크립트 파일을 바디부분에 넣어준다
favicon:"./favicon.ico" //그냥 구글에서 다운로드 받아서 넣어라고함 ㅡㅡ;
})
]이후 html에 css를 인젝트 하기위해 사용하는 플러그인을 불러온다.
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
new MiniCssExtractPlugin({filename:"style.css"})이후 모듈 속성을 입력한다.
module:{
rules:[
{
test: /\.css$/, //css파일을 로더를 이용해서 읽어들이겠다.
use: [MiniCssExtractPlugin.loader, "css-loader"]
}
]
},CSS를 압축해주는 플러그인을 추가한다.
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
optimization:{
minimizer:[
new CssMinimizerPlugin()
]
}
}이후 로데시 문법을 이용해 html에 타이틀을 작성한다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
</head>
<body></body>
</html>
이후 index.js에서 css 파일을 import 한다.
import "../css/style.css" //css 파일을 임포트한다.package.json에 sctipts에 build를 입력해준다
"scripts": {
"build" : "webpack"
}npm run build로 테스트 해보고, --mode=production 을 추가한다.
"scripts": {
"build" : "webpack --mode=production"
}이 옵션이 없으면 디벨롭먼트 모드로 빌드가 된다.
dev서버 띄우기
dev서버를 띄우는 방법
devServer:{
host:"localhost"
port:8080,
open:true, //devserver를 실행할때 마다 브라우저를 새 창을 열어라
watchFiles: 'index.html' //index.html이 변화가 있을때 마다 리로드를 해줘라(번화감지)
}npx webpack-dev-server 로 서버 확인
dev-server을 사용하므로써 리프레쉬를 개발자가 일일히 해줘야되는데 바로적용되게 해준다.
package.json에 sctipts에 "dev": "webpack-dev-server"를 입력해준다
"scripts": {
"build" : "webpack --mode=production",
"dev": "webpack-dev-server"
},npm run dev 서버를 설정하였다.
1일차 최종 코드
style.css
div{
width: 100px;
height: 100px;
background-color: orange;
color: red
}index.js
import "../css/style.css" //css 파일을 임포트한다.
let a =1
let b =2
console.log(a+b);package.json
{
"name": "virtual-keyboard",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build" : "webpack --mode=production",
"dev": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^6.5.1",
"css-minimizer-webpack-plugin": "^3.3.1",
"html-webpack-plugin": "^5.5.0",
"mini-css-extract-plugin": "^2.4.6",
"terser-webpack-plugin": "^5.3.0",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.7.2"
}
}webpack.config.js
const path = require("path");
const TerserWebpackPlugin= require('terser-webpack-plugin')
const HtmlWebpackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
module.exports = {
entry: "./src/js/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname,"./dist"),
clean:true
},
devtool: "source-map",
mode: "development",
devServer:{
host:"localhost",
port: 8080,
open:true, //devserver를 실행할때 마다 브라우저를 새 창을 열어라
watchFiles: 'index.html' //index.html이 변화가 있을때 마다 리로드를 해줘라(번화감지)
},
plugins:[
new HtmlWebpackPlugin({
title: "keyboard", //인터넷 프라우저의 이름을 나타냄
template: "./index.html", //템플릿 상대경로
inject: "body", //빌드한 자바스크립트 파일을 바디부분에 넣어준다
favicon:"./favicon.png" //구글에서 다운받아 넣어라고 함
}),
new MiniCssExtractPlugin({filename:"style.css"}) //html에 css를 인젝트 하기위해 사용
],
module:{
rules:[
{
test: /\.css$/, //css파일을 로더를 이용해서 읽어들이겠다.
use: [MiniCssExtractPlugin.loader, "css-loader"]
}
]
},
optimization:{
minimizer:[
new TerserWebpackPlugin(),
new CssMinimizerPlugin()
]
}
}개발환경 설정 - Webpack 1,2 클리어
