Weppack(2) - 웹팩 튜토리얼
[Webpack - 웹팩 간단한 실습]
인프런 장기효(캡틴판교)님의 프론트엔드 개발자를 위한 웹팩 를 수강하며 교안 참고 + 실습 한 내용입니다.
웹팩 맛보기 튜토리얼
그럼 이제 웹팩을 가볍게 맛볼수 있는 튜토리얼을 진행해보겠습니다. 이번 튜토리얼로 웹팩을 실행할 수 있는 개발 환경을 구성하고 빌드 과정을 경험해볼 수 있을 것입니다.
개발 환경 구성
먼저 튜토리얼을 진행하기 위해서는 아래 소프트웨어가 컴퓨터에 설치되어 있어야 합니다.
- Node.js LTS Version(버전 10 이상)
- NPM 버전 6 이상
실습 절차 - 웹 페이지 자원 구성
1) 빈 폴더에서 아래 명령어로 package.json 파일을 생성
npm init -y
2) 아래 명령어로 해당 폴더에 웹팩 관련 라이브러리와 lodash 라이브러리 설치
npm i webpack webpack-cli -D
npm i lodash
3) 폴더에 index.html 파일을 생성하고 아래 내용 추가
<html>
<head>
<title>Webpack Demo</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="src/index.js"></script>
</body>
</html>
4) 프로젝트 루트 레벨에 src 폴더를 생성하고 그 안에 index.js 파일 생성.
function component() {
var element = document.createElement('div');
/* lodash is required for the next line to work */
element.innerHTML = _.join(['Hello','webpack'], ' ');
return element;
}
document.body.appendChild(component());
실습 절차 - 웹팩 빌드를 위한 구성 및 빌드
5) 웹팩 빌드 및 빌드 결과물로 실행하기 위해 각 파일에 아래 내용 반영
// index.js
import _ from 'lodash';
function component() {
var element = document.createElement('div');
/* lodash is required for the next line to work */
element.innerHTML = _.join(['Hello','webpack'], ' ');
return element;
}
document.body.appendChild(component());
<!-- index.html -->
<html>
<head>
<title>Webpack Demo</title>
<!-- <script src="https://unpkg.com/lodash@4.16.6"></script> -->
</head>
<body>
<!-- <script src="src/index.js"></script> -->
<script src="dist/main.js"></script>
</body>
</html>
6) 웹팩 빌드 명령어를 실행하기 위해 package.json 파일에 아래 내용 추가
"scripts": {
"build": "webpack --mode=none"
}
7) npm run build 명령어 실행 후 index.html` 파일을 라이브서버로 실행
8) 프로젝트 폴더 루트 레벨에 webpack.config.js 파일 생성 후 아래 내용 추가
// webpack.config.js
// `webpack` command will pick up this config setup by default
var path = require('path');
module.exports = {
mode: 'none',
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
9) package.json` 파일을 아래와 같이 수정
"scripts": {
"build": "webpack"
}
10) 다시 npm run build 명령어를 실행하여 빌드가 잘 되는지 확인
웹팩 설정
mode
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode=none"
}
- 기존 웹팩 3 와 4의 차이는
mode임 - mode 설정은
none,development,production세가지가 존재함 mode설정을 하지 않으면 결과 코드가 난독화되어서 나옴
entry
-
결과 파일의 경로를 설정할 수 있음
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --mode=none--entry=src/index.js --output=puble/output.js" } -
웹팩을 사용하면서 많은 옵션들을 추가하기 때문에 저렇게 한줄로 관리하는 것을 권장하지 않는다.
-
웹팩에서 제공하는 웹팩 설정파일인
webpack.config.js를 사용하는 것이 좋다.
-
# 설정파일을 알아서 불러옴 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack }
웹팩 적용 전과 후
웹팩 적용 전
- 한 화면을 띄울 때 5개의 request를 해야함.
- 사용하는 라이브러리가 많을 수록 더 많은 request가 필요
- 페이지 로딩이 오래걸림
웹팩 적용 후
-
3개의 request
-
여러 파일을 하나로 합치기 때문에 페이지 로딩이 빠르다
결과 파일 분석
- webpack으로 생성한
dist/main.js파일을 열어보자
-
1~84 라인은 웹팩 내부로직이기 때문에 무시하고 그 다음 코드부터 살펴보면 0,1,2… 처럼 숫자로 표현된 것을 볼 수 있는데, 이 숫자는 각각 사용한 모듈들을 의미한다.
-
두 번째 코드도 접어보면
// IIFE (functuon() { .... })()이런식으로 즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)으로 되어있는 것을 알 수 있다.
Comments