Skip to main content

시작 하기

Webpack 공식사이트를 참고하였습니다. 거의 번역에 가깝습니다.

  • npm에 관한 설명은 적지 않습니다.

설치#

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack --save-dev
npm install webpack-cli --save-dev

기본 세팅#

webpack-demo
|- package.json
+ |- index.html
+ |- /src
+ |- index.js
//src/index.js
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 수정
...
"description": "",
+ "private": true,
- "main": "index.js",
...

번들만들기#

  • 디렉터리 구조 바꾸기
webpack-demo
|- package.json
+ |- /dist
+ |- index.html
- |- index.html
|- /src
|- index.js
  • 번들을 위한 의존 대상 설치
npm install --save lodash
  • import
//src/index.js
+ import _ from 'lodash';
+
function component() {
...
}
document.body.appendChild(component());
  • update html
<!-- dist/index.html -->
...
<body>
-
<script src="./src/index.js"></script>
+
<script src="main.js"></script>
</body>
...

  • npx webpack을 실행합니다. (global의 경우 webpack으로 충분)

  • index.html을 열면 hello webpack이 있을 겁니다.

모듈#

  • import와 export를 지원합니다.
  • 하지만 다른 es2015의 특징은 지원하지 않으므로 만약 이를 이용하고 싶다면, babel 같은 transpiler를 loader system을 통해 이용하시길 바랍니다.

Configuration 사용#

  • 대부분의 프로젝트는 상세한 configuration을 설정해야 하므로, 웹팩에서 필수적으로 요구되는 것은 아니나 사용방법을 알아두어야합니다.
  • 프로젝트에 다음과 같이 파일을 생성합니다.
webpack-demo
|- package.json
+ |- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.js

npm 스크립트#

  • package.json 에서 쇼트컷을 설정할 수 있습니다.
"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
+ "test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack"
},