생활코딩 Webpack강의를 들으며 작성한 내용입니다.
Webpack
1.웹팩 이전의 세계와 모듈
이름이 충돌하는 문제 발생, 모듈의 등장
규모있는 어플리케이션에서 각각의 개발자들이 사용하고있는 변수의 이름이 중복될 가능성이 있다.
1)모듈화 전
<html> <head> <script scr="./source/hello.js"></script> <script scr="./source/world.js"></script> </head> <body> <h1>Hello, Webpack.</h1> <div id="root"></div> <script> document.querySelector('#root').innerHtml = word; //충돌. </script> </body> <html> // source/hello.js var world = "Hello"; // source/world.js var world = "World";2)모듈화 후.
hello.js, world.js를 따로 다운로드 받게된다. 네트워크 커넥션이 증가한다. 네트워크 부하 발생.
모듈화를 하면 마치 하나의 디렉토리처럼 hello.js안에서 사용하는 js 변수는 해당 파일안에서만 사용할 수 있다.
<script type="module"> import hello_word "./source/hello.js" import world_word "./source/world.js" document.querySelector('#root').innerHtml = hello_word + world_word; //충돌이 발생하지 않는다. </script> // source/hello.js var world = "Hello"; export default word; // source/world.js var world = "World"; export default word;
아래의 요구사항을 충족하기 위해 번들러 등장
- 웹에서도 모듈을 사용하고 싶다.
- 여러개의 파일을 묶어서 제공하고 싶다
2.웹팩의 도입
구형브라우저에서도 사용할 수 있도록(import/export가 비교적 최신 문법이기 때문)
파일을 여러개 묶어서 사용할 수 있도록 번들링
번들링을 사용하기 위해서 Node.js의 패키지로 사용할 필요가 있음
Node.js 설치
npm install -D webpack webpack-cli // -D 개발을 하기위한 옵션index.js : 입구에 해당하는 js(엔트리 파일) 웹팩을 이용해서 엔트리파일을 번들링하자. => hello.js + world.js
import hello_word "./source/hello.js" //index.js의 입장에서 경로를 적어야 함 import world_word "./source/world.js" document.querySelector('#root').innerHtml = hello_word + world_word;번들링
npx webpack --entry ./source/index.js --output ./public/index_bundle.js
index.html 수정
- hello.js랑 world.js를 각각 다운로드 할 필요 없이 index_bundle.js만 가져오면 된다
- index_bundle.js안에서 import/export 같은 최신 js코드를 크로스브라우징 처리해준다.
<html> <head> </head> <body> <h1>Hello, Webpack.</h1> <div id="root"></div> <script src"public/index_bundle.js"/> </body> <html>
3. 설정 파일의 도입
- 웹팩명령어를 사용하면 다양한 파일을 번들링 해준다.
- 명령어 대신에 설정파일을 이용할 수도 있다.
- INPUT -> PROCESS -> OUTPUT이 기본 INPUT은 버들링이 필요한 파일들 PROCESS는 웹팩에게 모듈화 시킬것 OUTPUT 모듈화된 결과
webpack.config.js
- 공식 홈페이지 CONFIGURATION 참고. cheatsheet처럼 사용하자
const path = require('path'); //node.js에서 제공하는 경로인듯 module.export = { entry:"./source/index.js", output:{ path:path.resolve(__dirname, "public"), filename:'index_bundle.js' } }config 파일을 사용해서 번들링
- npx webpack --Config webpack.config.js
- 해당 config파일안에 작성된대로 실행하게 된다.
- 파일명이 webpack.config.js면 그냥 npx webpack만 쳐도 번들링을 해준다.
4. 운영 모드의 도입
- 실서버용과 개발용 앱은 설정이 각각 다르다
- webpack에서 제공하는 dev, prod 모드의 특징과 모드의 설정방법을 살펴보자.
'Today I learned' 카테고리의 다른 글
| vue.js 코딩공작소 책 요약(3) (0) | 2020.07.16 |
|---|---|
| 브라우저 밖으로 나온 자바스크립트 - 웹팩 (2) (0) | 2020.07.15 |
| tistory 기본 캘린더를 이용해서 일일포스팅 똥글뱅이 만들어보기 (0) | 2020.07.10 |
| vue.js 스터디 1주차 (0) | 2020.07.07 |
| [vue.js] vue.js 코딩공작소 책 요약(2) (0) | 2020.07.07 |
댓글