기존에 자바스크립트로 제작중이던 투두리스트를 웹팩으로 전환하기
웹팩은 유지보수에 없어서는 안되는 모듈시스템을 적용할 수 있고, 파일의 용량을 대폭 압축시켜주기때문에 굉장히 유용한 시스템이다.
1. 폴더트리 구성
일단 나의 투두리스트 파일은 src폴더안에 파일별로 세분화 해놓았다. 웹팩을 적용하기 위해서도 물론 파일들의 위치를 확실하게 알아야하지만 무엇보다 모듈화 하기위하여 위치를 세분화 하고 정확히 알고 있을 필요가 있다.
2. package.json 설치
terminal창에 npm init -y이라고 치면 package.json파일이 자동 생성된다. 이 파일은 앞으로 설치하게 될 webpack과 같은 시스템들을 설치하고 사용하는것을 컨트롤 할 수 있는 파일이라고 할 수 있다.
//package.json
{
"name": "todoList",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}package.json파일에 들어가보면 다음과 같이 기본 설정이 되어있다. 앞으로 몇가지 기능을 더 설치하게 되면 이 파일이 늘어나는 것을 보게 된다.
3. 웹팩 설치하기
다시 termonal창에 npm install -D webpack webpack-cli라고 치면 웹팩이 설치됨과 동시에 node_modules라는 폴더와 package-lock.json이라는 파일이 생성된다. node_modules는 설치한 웹팩의 기능들이 담겨있는 폴더이다. 이 폴더는 용량이 크기 때문에 git에 올릴때는 .gitignore파일에 작성하여 올리는 것이 좋다.
package-lock.json파일은 버전관리 시스템이라고 할 수 있다. 파일에 작성된 버전들로 사용을 해야 모두가 같은 결과를 볼 수 있기 때문에 이 파일은 꼭 git에 같이 올려주는 것이 좋다.
또한 npm 설치할 때 -D를 작성한 이유는 웹팩이 개발에 필요한 도구 이기 때문이다.
//package.json
{
"name": "sssss",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
//--------------------------------
"devDependencies": {
"webpack": "^5.11.0",
"webpack-cli": "^4.2.0"
}
//-----------------------------------
}위에 코드를 보면 알수있듯이, package.json파일에 설치한 웹팩이 생긴것을 볼 수 있다. 그리고 웹팩은 "devDependencies"라는 오브젝트 안에 들어가 있다. 앞으로 개발자에게 필요한 도구들은 모두 "devDependencies"에 들어가야 하며, 상품에 직접적으로 적용되는 즉 lodash와 같이 런타임에 계속 사용되는 기술은 "dependencies"에 들어 갈 것이다.
4. 프로젝트 모듈화 하기
// core.js
import { TODOS } from "../../data/todo.data.js";
import { thisYear, thisMonth, thisDate } from "../util/util.common.js";
import {
createTodoElement,
removeCategoryBorderBottom,
deleteAllTodoLists,
todoListEditDisplayToggle,
deleteTodoListClickHandeler,
changeDateElementTextToDate,
changeTodoListOfCategory,
} from "../util/util.todo.common.js";
...
...
...
export {
firstDefaultActions,
resetTodoListByCategoryClickHandeler,
addNewListclickHandeler,
editTodoListClickHandeler,
lookForTodoListsClickHandeler,
};// app.js
import {
firstDefaultActions,
resetTodoListByCategoryClickHandeler,
addNewListclickHandeler,
editTodoListClickHandeler,
lookForTodoListsClickHandeler,
} from "./core/core.js";기존에는 html에 script태그로 자바스크립트를 단계별로 작성해 놨었다. 그러나 코드가 많아질 수록 충돌가능성이 매우 높기때문에 필요한 부분만 불러서 쓸수있게 나눌 필요가 있었다.
ES6문법인 import/export문법을 사용하여 모듈화 하였다.
(javascript파일에 많지 않았기에 가능하였다... )
5. 웹팩 적용하기
웹팩을 적용하기 위해서는 config파일을 만들어야 한다. webpack.config.js라는 이름의 파일을 생성한다.
5-1. javascript파일 적용
//webpack.config.js
const path = require('path')
module.exports = {
mode: "production",
entry: "./src/js/app.js",
output: {
filename: "finalApp.js",
path: path.resolve(__dirname, "dist")
}
}위에 코드는 최종 파일인 app.js를 번들링하기위한 코드이다. webpack.config.js파일은 es6문법이아닌 common.js문법을 사용해야하기때문에 import/export문법이아닌 module.exports/require문법을 사용했다.
또한 mode는 3가지가 있는데 production모드가 용량을 가장 작게 만들어 주기 때문에 production모드를 적용하였다. entry는 app.js의 위치이다.
output은 번들링을 거쳐 만들어질 결과를 뜻한다. 파일네임을 작성한후 node에서 가져온 path를 사용하여 dist라는 폴더를 생성한단 뜻이다.
5-2. css적용
css를 webpack에 적용하기 위해서는 2가지 loader를 설치해야한다. webpack은 js밖에 모르기때문에 loader를 설치하여 webpack이 css를 이해할 수 있게 도와주는 것이다.
terminal창에 npm i -D css-loader를 쳐서 다운 받은 후 npm i -D style-loader도 다운 받는다.
//package.json
{
"name": "sssss",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
//------------------------
"devDependencies": {
"css-loader": "^5.0.1",
"style-loader": "^2.0.0",
"webpack": "^5.11.0",
"webpack-cli": "^4.2.0"
}
//------------------------
}다운 받고 나서 package.json파일을 들어가 보면 loader가 추가된 것을 볼 수 있다. 설치가 잘 되었다는 뜻이다.
이제 webpack.config.js파일을 수정해야 한다.
//webpack.config.js
const path = require('path')
module.exports = {
mode: "production",
entry: "./src/js/app.js",
output: {
filename: "finalApp.js",
path: path.resolve(__dirname, "dist")
},
module: {
rules: [
use: /\.css$/,
test: ["style-loader", "css-loader"]
]
}
}loader는 module이라는 { }안에 작성한다. 그리고 rules[ ]안에 use와 test를 적는 것인데 use: 코드는 css라는 파일을 모두 읽겠다는 뜻이고 test:는 설치한 loader를 사용하겠다는 것이다.
중요한점은 test: [순서]이다 오른쪽부터 순서대로 읽기 때문에 css-loader로 먼저 읽고 style-loader를 읽을수 있게 작성해야한다.
import "../css/reset.css";
import "../css/index.css";가장 중요한것은 webpack은 javascript를 통해서 css를 읽어내기 때문에 app.js파일에서 css를 import해줘야 한다는 것이다!!
5-3. html 적용
html을 적용하기 위해서는 plugin을 설치하여야 한다.
terminal창에 npm i -D html-webpack-plugin이라고 작성한다.
//package.json
{
"name": "sssss",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
//------------------------
"devDependencies": {
"css-loader": "^5.0.1",
"html-webpack-plugin": "^4.5.0",
"style-loader": "^2.0.0",
"webpack": "^5.11.0",
"webpack-cli": "^4.2.0"
}
//------------------------
}package.json파일을 다시 확인해보면 "html-webpack-plugin": "^4.5.0",라고 적힌 것을 확인 할 수 있다.
//webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: "production",
entry: "./src/js/app.js",
output: {
filename: "finalApp.js",
path: path.resolve(__dirname, "dist")
},
module: {
rules: [
use: /\.css$/,
test: ["style-loader", "css-loader"]
]
}
plugins: [
new HtmlWebpackPlugin({ template: "./src/html/index.html" })
]
}다시 webpack.config.js파일로 돌아가 기존 js와css를 작성했듯이 plugin을 작성한다.
require문법으로 가져온 plugin을 new HtmlWebpackPlugin({template:})으로 작성한 후 html의 주소를 적는다.
5-4. 번들링 하기
//package.json
{
"name": "todoList",
"version": "1.0.0",
"description": "",
"main": "index.js",
//-----------------------
"scripts": {
"build": "webpack"
},
//-----------------------
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^5.0.1",
"html-webpack-plugin": "^4.5.0",
"style-loader": "^2.0.0",
"webpack": "^5.11.0",
"webpack-cli": "^4.2.0"
}
}다시 package.json으로 돌아가서 "script"부분을 본다. script는 작동할 webpack을 컨트롤 하게 될 부분이다. 즉 위와같이 "build": "webpack"이라고 작성하면 build하게될때 webpack이 실행된다는 뜻이다.
terminal창에서 npm run build를 적으면 webpack이 작동될 것이다.
위 사진과 같이 dist라는 폴더안에 최동 js파일과 html파일이 만들어졌다.
모듈화하였고 압축되었으며 파일도 2개만 존재한다.
import/export만 잘 하였다면 app또한 잘 작동되는 것을 확인할 수 있다.
