윤개발

[WebPack] 웹팩 시작하기 - 개발 환경 구성 본문

프론트/WebPack

[WebPack] 웹팩 시작하기 - 개발 환경 구성

DEV_SJ 2020. 4. 4. 15:29

웹팩이란 프런트 엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러이다. 모듈 번들러란 자원들(HTML,CSS,JS,IMAGE)을 하나로 병합해주는 것을 말한다.

1. 임의 폴더 생성

2. npm init -y

 y:(기본 설정으로 하겠다는 옵션)

3. npm i webpack webpack-cli -D

 i: install 약자
-D --save-dev 개발용 옵션

4. npm i lodash

lodash 설치

5. 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>

6. root dir에 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());
저작자표시

'프론트 > WebPack' 카테고리의 다른 글

Intellij에서 Vue alias 사용하기  (0) 2020.05.04
[Webpack] NPM의 기초  (0) 2020.04.14
'프론트/WebPack' Related Articles more
Comments