멀티 채팅에 이어서 진짜 맛보기만 하고 있는 느낌이긴 하지만
그래도 한다는거에 나로썬 만족하겠다 :) ( 뻔뻔쓰 )
이번에 관심을 가진건 웹팩이다.
저번처럼 등장배경및 친구소개먼저 받을꺼다.
우리가 CSS를 header에 적고 script를 body이후에 적을때가 있을 것이다.
브라우저 렌더링 과정을 보면
1. HTML읽은 후 파싱
2. DOM, CSSOM 생성
3. 렌더링 트리 생성
4. 레이아웃 계산
5. 페인트🎨
여기서 HTML을 읽는 과정중 스크립트를 만나게 되면 스크립트를 읽고 파싱 후 HTML을 다시 읽어내려간다.
자바스크립트를 분할 하여 여기저기서 여러개 불러올탠데 생각만 해도 엄청 느리지 않은가 -ㅅ-
이런 단점을 Webpack을 통해 브라우저 랜더링 시 파일들을 단일 파일로 만들어 주어 도움이 된다.
이제또 socket.io처럼 webpack에서 소개되어 있는 가이드 라인을 하나씩 따라가보자.
역시 시작전엔 폴더를 만들어주고 새로운 프로젝트를 하나 만들어 주자 :)
mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev1. webpack-demo 폴더 생성
2. webpack-demo로 이동
3. 새 프로젝트 설치
4. webpack 설치
그리고 해당 폴더에 index.html과 src폴더 안에 index.js 파일이 있는 구조로 만들어 주겠다.
index.js는 아래와 같이! html의 body에 Hello webpack을 출력해주려고 하나보다.
function component() {
const element = document.createElement('div');
// Lodash, currently included via a script, is required for this line to work
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());index.html
<!doctype html>
<html>
<head>
<title>Getting Started</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>그리고 실수로 게시하는걸 방지하기 위해 package.json에서 private : true로 수정하고 main을 삭제해주겠다.
private은 원래 npm에 원격으로 베포되는 것을 로컬로만 작업하기를 원할때 사용해주는 설정이라고한다 ( 남친피셜 )
그래서 문서에 다른 사람의 접근을 제한하거나 추가적인 수정을 하는것을 방지해준다고 설명해놨나보다.
나는 여기서부터 이해가 되지 않았다.
main을 왜 삭제 해준다는거고 그다음 설명에서 스크립트 태그간에 종속성이 뭐시기 저시기....
index.html을 살펴보면 lodash라는 라이브러리를 불러온 후에 index.js를 호출하고 있다.
그러니까 index.js에서 _.join 이부분! 이부분을 사용하기 위해 lodash라는 라이브러리를 사용하고 있다는거다.
그래서 package.json에서 main에 index.js가 적혀 있다면 index.js가 제대로 읽혀지지 않을 것이다.
웹팩 문서에서 아래와 같이 설명한 이유가 이때문일 것이다.
- 스크립트가 외부 라이브러리에 의존한다는 것은 명백하지 않습니다.
- 종속성이 없거나 잘못된 순서로 포함 된 경우 응용 프로그램이 제대로 작동하지 않습니다.
- 종속성이 포함되어 있지만 사용되지 않으면 브라우저는 불필요한 코드를 강제로 다운로드합니다.
이런 이유에서 우리는 웹팩을 사용하여 관리를 해주자 하는것이다 :)
열심히 따라쳤더니 이건 그냥 이러한 이유에서 웹팩을 써야한다는 하나의 예제인거 같다...😠
이제 파일 구조를 살짝 바꾸어서 시작해보자.
index.html을 dist라는 폴더 생성후 해당 폴더로 이동해주자.
그리고 lodash를 index.js와 종속되게 하기위해 로컬에 설치후 import한다.
npm install --save lodash
index.js에 lodash 불러오기
import _ from 'lodash'
그리고 index.html에서는 lodash를 불러오는 부분과 index.js를 불러오는 부분을 지우고
main.js를 불러오도록 설정해 놓을 것이다.
<!doctype html>
<html>
<head>
<title>Getting Started</title>
<!--script src="https://unpkg.com/lodash@4.16.6"></script-->
</head>
<body>
<!--script src="./src/index.js"></script-->
<script type="text/javascript" src="main.js"></script>
</body>
</html>이렇게 설정 하는 이유는 기본적으로 웹팩에 대해 아무런 옵션 설정을 하지 않은 경우에
웹팩은 /src/index.js를 읽어 main.js를 만들어주는 듯 하다.
그리고 웹팩을 실행(?)해주면
npx webpack
/dist/index.html 파일 친구로 main.js가 생성되는 것을 볼 수 있다.
정상적으로 진행이 되었다면 index.html 실행 시 hello webpack이라는 문구를 확인 할 수 있을 것이다.
npx webpack 명령어 실행시 경고가 발생할텐데 아래에서 다루도록 하겠다.
내 생각엔 옵션을 설정안했다고 알려주는 것 같다.
아마 이 옵션이 webpack기본 인풋 경로등을 설정해주는거 아닐까 예측해본다.
이제 웹팩의 config파일에 대해 알아보려한다.
config파일의 위치는 package.json파일(프로젝트 디렉토리 경로)이 있는 곳에 webpack.config.js를 만들어준다.
아래는 webpack.config.js을 소스코드다.
기본 설정을 그대로 표현한거 같다.
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
};
설정 파일을 적용 해주자 :)
npx webpack --config webpack.config.js
webpack config파일 문서를 보니 package.json에서도 설정이 가능한것 같다.
해당 config에 대한 설명은 링크 첨부 해놓겠다.
webpack config파일 문서 : https://webpack.js.org/configuration/
위에서는 webpack 명령어를 수동으로 실행했던 것을 npm cli로 등록하도록 설정하려 한다.
package.json의 scripts에 webpack명령어 인 npx webpack을 npm run build로 실행 되도록 설정하였다.
{
"name": "webpack-demo",
"version": "0.0.0",
"description": "",
"dependencies": {
"lodash": "^4.17.15"
},
"devDependencies": {
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC",
"private": true
}
...끗...
이게 맛보기 였던것 같구 다음에 Asset Management로 이어지던데 이어서 공부하는 걸루 🙀
https://webpack.js.org/guides/getting-started/
Getting Started | webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
webpack.js.org
'웹 프로그래밍 > 공부일지' 카테고리의 다른 글
| [ HTML ] 비디오 태그 자동재생 관련 옵션 (0) | 2020.04.03 |
|---|---|
| [ Node.js / Webpack ] 자산 관리 ( css, image, font, file, loader ) (0) | 2020.03.21 |
| [ 원페이지 스크롤 + 일반 스크롤 ] 화나서 직접 만든 원페이지 스크롤 2탄 (0) | 2020.03.12 |
| [Node.js] 실시간 멀티 채팅 만들기 3탄 (브로드캐스팅) (2) | 2020.02.23 |
| [Node.js] 실시간 멀티 채팅 만들기 2탄 (0) | 2020.02.20 |