웹팩 시작하기 튜토리얼 파트1 - 웹팩 적용 전

실습절차 - 웹페이지 자원 구성

빈폴더에서 아래 명령어로 package.json 파일 생성
```
npm init -y
```
아래 명령어로 해당 폴더에 웹팩관련 라이브러리와 lodash 라이브러리 설치
```
npm i webpack webpack-cli -D
npm i lodash
```
lodash는 자바스크립트 유틸리티 라이브러리이다.

폴더에 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>

프로젝트 루트 레벨에 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());

index.html 파일 웹 브라우저에서 확인

LHJ

웹팩 시작하기 튜토리얼 파트1 - 웹팩 적용 전

웹팩 시작하기 튜토리얼 파트1 - 웹팩 적용 전

Related Posts