https://dev.to/dtroyano86/how-to-setup-a-javascript-project-with-webpack-259a
How to Setup a Javascript Project with Webpack
Have you ever wished you could stop manually adding all your scripts as tags in your html file? Well...
dev.to
1) 웹팩으로 자바스크립트 프로젝트 구성하는 방법
모든 스크립트들을 태그처럼 html 파일에 수동으로 넣는 것 좀 그만했음 하고 바란적 있는가?
그렇다면 그런 소원을 빌던 날들은 끝이다!
내가 웹팩의 즐거움을 소개하겠다.
그 자체로, 웹팩은 html 파일에 오직 한 개의 스크립트 태그만 허용한다. 종속 그래프를 생성하고 나서 모든 코드를 함께 묶어버림으로서 이렇게 하는 것이다. 우리가 만들 샘플인 할일 앱에 대한 종속 그래프는 이렇게 생겼다.
웹팩은 코드를 다 훑으면서 불러오기(import) 및 내보내기(export) 선언문들을 전부 찾아낸 다음, 당신이 실제로 사용하고 있는 모든 코드를 당겨와서 당신의 html 파일에 포함시킬 그 하나의 파일로 전부 합친다.
다른 어떤 일을 시작하기에 앞서 준비작업을 해야 한다. 새 폴더에 들어가 아래 예시와 같은 파일 디렉토리를 설정한다. 그림에 나온 파일들을 포함하는 build 와 src 폴더들이 필요하다.
이제 최상위 디렉토리에다 뭘 좀 설치하자. 첫째로 npm init -y 를 실행한다. 이것이 package.json 파일과 함계 모든 기본 설정들을 설치할 것이다.
이제 우리는 몇 가지 모듈들을 설치해야 한다. --save-dev 는 그 모듈들이 개발 종속으로 저장될 것이며, 당신의 최종 빌드를 과하게 부풀리지 않을 것임을 나타낸다. 그러니 npm install --save-dev webpack webpack-cli 를 실행하라.
그러면 아주 간단한 할일 목록을 나타내는 앱을 만들어 보도록 하자. 먼저 index.html 파일을 마련하자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To Do List Webpack Demo</title>
</head>
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
</html>
이제 실제로 어떤 자바스크립트 코드를 넣기 전에, 우리의 앱이 뭐하는 건지를 살펴보자. 여기 그 모든 함수들이 있다.
function toDoList (list) {
const newElement = document.createElement('ul');
newElement.innerHTML = "To Do List";
list.forEach(item => {
newElement.append(toDoListEntry(item));
});
return newElement;
}
function toDoListEntry (item) {
const newElement = document.createElement('ul');
newElement.innerHTML = item;
return newElement;
}
const toDos = ['Go to store', 'Clean house', 'Feed dogs'];
document.getElementById('app').appendChild(toDoList(toDos));꽤 간단하죠. 그렇죠?
우리가 그 모든 것들을 한 파일에 넣으면 안 될 이유는 없지만 이게 훨씬 복잡해서 이 함수들을 각자의 파일로 쪼개야 하는 척을 하자. 그래서 우리의 파일 나무에 두어 개의 파일들을 더하자. 이렇게 보여야 한다.
이제 이 것들을 불러오기 및 내보내기들과 연결하자! 일단 toDoListEntry.js 를 들여다 보자.
function toDoListEntry (item) {
const newElement = document.createElement('ul');
newElement.innerHTML = item;
return newElement;
}
export default toDoListEntry;
우리는 다른 파일들이 볼 수 있게 이 끝에다가 내보내기 선언문을 더했다. 그리고 이 파일에서 우리가 원하는 것은 한가지 뿐이기 때문에 default 는 그 과정을 더 빠르게 만들 것이다.
이제 toDoList.js 에도 똑같이 하자.
import toDoListEntry from "./toDoListEntry.js";
function toDoList (list) {
const newElement = document.createElement('ul');
newElement.innerHTML = "To Do List";
list.forEach(item => {
newElement.append(toDoListEntry(item));
});
return newElement;
}
export default toDoList;
파일 제일 위에 불러오기 선언문을 더해 toDoListEntry.js 로부터의 고정 내보내기에 접근할 수 있게 했다. 그리고나면 우리는 바로 전과 마찬가지로 이것을 forEach 룹 안에서 그냥 부를 수 있다.
그리고 나서 toDoList 를 내보낸다.
이제 파일 딱 하나만 설정하면 된다. index.js 파일을 살펴보자.
import toDoList from "./toDoList.js";
const toDos = ['Go to store', 'Clean house', 'Feed dogs'];
document.getElementById('app').appendChild(toDoList(toDos));
우리가 할 일은 전처럼 toDoList.js 에서 toDoList 를 불러오는 것이다.
진짜 빠르게, 우리는 webpack.config.js 파일을 생성해야 되는데, 이렇게 시작한다.
module.exports = {
entry: './src/index.js',
output: {
filename: 'app.js',
path: __dirname + 'build',
publicPath: '/'
}
entry 지점은 종속 그래프를 만들기 위해 처음으로 봐야할 파일이다.
output 은 컴파일 된 코드가 갈 곳이다. filename은 그 파일의 이름이고 path는 당신이 파일이 들어가길 원하는 폴더의 경로이다.
이제 npx webpx --config ./webpack.config.js 를 실행하면 코드는 컴파일되고 build 폴더에서 app.js 파일이 기다리고 있을 것이다. 그런데 뭘 바꿀 때마다 이걸 타자 치면 금세 피곤해질 것이다. 그러니 이걸 담당해주는 새로운 스크립트를 package.json 파일에 더하자.
"start": "webpack --config ./webpack.config.js --watch"
--config 은 config file 을 보려면 어디를 봐야 하는지를 알려주는 것이고 --watch 는 당신이 어떤 파일을 수정하면 계속 업데이트 한다는 것을 말한다. 그러면 이제 당신은 그냥 npm start 를 실행하면 되고, app.js 파일은 자동으로 업데이트 될 것이다!
마지막으로 webpack.config.js 파일에 우리의 삶의 질을 향상시켜줄 업데이트를 하자. 우리는 이것을 개발 모드에 넣어서 코드의 어떤 오류든지 읽을 수 있고 실제로 디버그 할 수 있도록 할 것이다.
module.exports = {
entry: './src/index.js',
output: {
filename: 'app.js',
path: __dirname + '/build',
},
devtool: 'eval-source-map',
mode: 'development'
}
이 것을 개발 모드에 넣으면 코드가 계속 최소화되는 것을 막아주고, 개발도구가 혹시 있을 어떠한 오류도 'eval-source-map' 추적을 해서 쉽게 찾을 수 있도록 해준다.
보시다시피, 이 프로젝트가 아주 작아서 웹팩이 필요 없기는 하지만 그 도구의 유용성은 여전히 증명해준다. 당신의 프로젝트가 점점 더 커짐에 따라 웹팩은 당신의 코드가 계속 매끈하게 정리되어 있도록 도와줄 것이다!
'웹개발' 카테고리의 다른 글
| 리액트 훅과 리덕스를 사용한 리액트 상태 관리 (0) | 2020.07.20 |
|---|---|
| 2021년 리액트 네이티브가 커질 7가지 이유 (0) | 2020.07.17 |
| 풀스택 개발자가 되기 위한 최소 로드맵 (0) | 2020.07.16 |
| UI 디자인 색상 사용의 10 가지 원칙 (0) | 2020.07.15 |
| 웹팩과 바벨로 리액트 설정하기 (0) | 2020.07.15 |