webpack이 왜 필요했고, 어떤 것을 해주는지 알았으니 직접 해보자.
project 생성 및 webpack 모듈 설치
webpack-tutorial이라는 폴더를 만들고 npm init으로 pcakge.json을 만들자.
그런다음, webpack, webpack-cli, lodash를 설치하고
index.html과 index.js를 만들어 보자.
webpackwebpack core 모듈webpack-cliwebpack command 모듈lodash널리 쓰이는 lodash
mkdir webpack-tutorial
cd webpack-tutorial
npm init -y
npm install -D webpack webpack-cli
npm install lodash
touch index.js
touch index.html
package.json, index.html, index.js 작성
package.json
- scripts에 아래와 같이 추가한다.
- webpack은 bundle을 하는 명령어이다.
- 아무런 설정을 하지 않아도 default options으로 동작한다.
{
"scripts": {
"build": "webpack"
}
}index.js
index.js에서는 설치한 lodash를 import하여 사용하고 있다.
import _ from 'lodash';
function component() {
const element = document.createElement('div');
element.innerHTML = _.join(["Hello", "Webpack"], ' ');
return element;
}
document.body.appendChild(component());index.html
- dist/main.js는 webpack의 default 결과물 경로 및 파일이름이다.
<html>
<body>
<script src="dist/main.js"></script>
</body>
</html>build 명령어로 Bundle!!!
위와 같이 파일들을 만들고 npm run build 를 쳐보자.
- 아래와 같이 dist라는 폴더에 main.js라는 파일이 생겼다.
- 열어보면 이해할 수 없는 코드가 막 작성되어 있다.
html 파일을 열어보면 'Hello Webpack'이라는 글자가 렌더링 된다.
webpack이 index.js와 lodash 모듈을 main.js로 번들링해주었다.
아는 만큼 보인다