webpack 요약
wecode 스터디 발표용으로 요약
쓰임
main.js
function func(name){
return name
}
index.js
func("dongha") // dongha
main, index 파일 둘 다 하나의 html 에서 실행되기 때문에 다른 파일에서 func라는 이름의 함수를 사용하면 충돌 가능성이 있다. 이를 보완하기 위해 웹팩을 사용한다. 웹팩은 모듈 번들로써 여러 파일들을 하나의 js 코드로 압축하는 라이브러리다.
모듈이란?
애플리케이션의 크기가 커지면 파일을 분리하는데 이때 분리된 파일을 각각 모듈이라 칭한다. 모듈은 클래스 하나 혹 복수의 함수로 구성된 라이브러리로 구성된다. 하나의 스크립트가 곧 하나의 모듈이다. export와 import로 다른 모듈을 가져올 수 있다.
index.js
import nameMake from "./main.js"
document.querySelector("body").innerHTML = nameMake("dongha")
main.js
function nameMake(name) {
return `${name}!!`
}
export default nameMake
시작
npm init
npm install -D webpack webpack-cli
모든 파일을 src 폴더로 옮긴다.
웹팩의 구성
Entry
웹팩이 빌드할 파일의 시작 위치를 나타낸다.
mode
none, development, production
Output
압축된 파일들이 저장될 위치와 이름을 지정한다.
npx webpack으로 번들링 시작
Loaders
웹팩은 모든 파일을 모듈로 본다. css, png 등등 번들링이 가능하다.
npm install --save-dev style-loader css-loader
index.js
import css from "./style.css"
Plugins
로더가 파일 단위로 처리하면 플러그인은 번들된 결과물을 처리한다. 특정 타켓을 추출할 때 사용한다. 로더는 모듈을 최종적으로 아웃풋으로 만들어가는 과정에서 사용되고 플러그인은 그런 최종적 결과물을 변형한다.
npm install --save-dev html-webpack-plugin
끝
참고 :
생활코딩
https://jeonghwan-kim.github.io/series/2019/12/10/frontend-dev-env-webpack-basic.html
Author And Source
이 문제에 관하여(webpack 요약), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dongha1992/javascript-webpack-요약저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)