티스토리 뷰

Vue.js/02.__Webpack

WebPack 이란?

✨✨✨✨✨✨✨ 2020. 12. 28. 17:35
반응형

WebPack

여러개의 JS를 하나의 파일로 묶어내는 모듈 번들러이다.

  • 주로 자바스크립트(JS)를 위한 모듈 번들러이지만 
    호환 플러그인을 포함하는 경우 HTML, CSS, 심지어는 이미지와 같은 프론트엔드 자산들을 변환할 수 있다.
  • 웹팩은 의존성이 있는 모듈을 취하여 해당 모듈을 대표하는 정적 자산들을 생성한다.

모듈, 모듈링

1. 모듈이란?

HTML, CSS, 심지어는 이미지같은 모든 요소들 하나하나가 모듈이다.


2. 모듈번들링?

웹서비스를 구성하는 파일들(css, js, sass 등)간의 연관된 관계를 하나로 합쳐주는 것 


WebPack 적용하기

  • index.js 파일에서 'lodash'를 사용하여 webpack 만들기
    • index.js + lodash.js 모듈 번들러 히여 Network의 속도를 빠르게 해줌

1. 환경설정

npm init -y

# 개발용 라이브러리
npm i webpack webpack-cli -D

# 배포용 라이브러
npm i lodash


package.json 파일
  1. npm init -y 명령어에 따라 위 파일이 생성됨
  2. webpack-cli와 lodash 라이브러리가 추가됨을 확인

{
  ... 생략 ...
  "devDependencies": {
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "lodash": "^4.17.15"
  }
}


2. index.js 파일

  • ladash 파일을 import 한다.

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());


3. webpack.config.js 파일 생성

가. Entry 설정
  • 정의 : Entry에 정의된 파일을 기준으로 하나의 번들파일을 만듦
    • 의존성 ↑

entry: './src/index.js',


나. output 설정
  • 정의 : Entry에 설정된 파일의 번들파일 경로

output: {
  filename: 'main.js', // 파일명
  path: path.resolve(__dirname, 'dist') // 파일 경로
}


다. Result

var path = require('path');

module.exports = {
  mode: 'none',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};


라. WebPack 결과 (main.js)

npm run build

위 명령어로 build를 하게 되면 하단 그림과 같이 index.js의 내용과 loadsh.js 의 내용이 합쳐지게 되고

하나의 모듈(main.js)로 나타남 


index.html
  • index.html파일에서는 index.js 파일이 아닌 
    빌드 된 main.js파일을 불러 표시함.
<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>

결론

webpack 적용 전



webpack 적용 후



index.js와 ladsh가 아닌
main.js 한개의 파일로 를 빌드함으로써 

Network의 처리단계가 줄어들었다 
→ 속도가 빨라짐

참고


반응형
저작자표시

'Vue.js > 02.__Webpack' 카테고리의 다른 글

css Loader 오류 You may need an appropriate loader to handle this file type  (0) 2020.12.29
npm ERR! missing script: build  (0) 2020.12.29
WebPack 이란2 import, export (예제)  (0) 2020.12.29
NPM 명령어 전역, 지역(배포용, 개발용)  (0) 2020.12.28
npm 라이브러리 설치  (0) 2020.12.28
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
글 보관함