Webpack 이란?
html 파일에 들어가는 여러개의 js,css,png,jpg파일들(에셋) 웹페이지가 이해할 수 있는 하나의 파일(번들)로 합쳐주는 Node.js 패키지
기본적으로 javascript를 번들링하는데 사용한다
웹을 구성하는 에셋을 모두 각각의 모듈로 보고,이를 조합해서 하나의 결과물을 만드는 도구Webpack 의 필요성 / 쓰는 곳
여러개의 javascript를 사용할때 전역변수가 겹치는 일이 없어진다.
에셋을 따로따로 여러번 요청해줄 필요가 없다 ( 요청 중복 제거 )
사용하지 않는 코드의 관리? ( 사용하지 않는 코드는 제외하고 번들링 )
javascript에서 원하는 순간에 정확히 모듈을 불러올 수 있도록 함Webpack 설치 방법
npm install -D webpack
// 옵션
// --save-dev, -D : package.json 파일의 devDependencis에 추가한다 ( 보통 개발 모듈을 추가함 )
// webpack v4 이상 사용시, cli 설치도 필요
npm install -D webpack-cliWebpack 설치 확인
./node_modules/.bin/webpack -v
Webpack 설정 파일 생성
// webpack.config.js
// path : 파일의 경로를 다루고 변경하는 Node.js 기본 모듈
const path = require('path');
module.exports={
// entry : 번들링할 기본 js파일들 지정
entry : ['./src/index.js', './src/test.js']
// output : 번들 결과 출력위치 지정
output: {
filename : 'bundle.js',
path : path.resolve(__dirname + '/build')
},
mode : 'none'
}
// Plug-In : build된 bundle 파일을 동적으로 특정 html 페이지에 추가,
// build시 javascript, css, html 등의 파일 난독화, 압축 가능| entry | 번들로 합치고 싶은 파일들 지정 |
| output | 번들 출력 위치 지정 |
| mode | 'development' : 개발용 / 'production' : 배포용(자동최적화) |
기본 js 파일 만들기
// src/index.js
const message = document.createTextNode("First js")
document.body.appendChild(message)
// src/test.js
const message = document.createTextNode("Second js")
document.body.appendChild(message)
js 번들링하기
webpack -w
// 우리가 지정한 폴더 내부에, 번들링된 파일이 생성된다!
// -w : 에셋파일들이 변경될 때마다, 다시 번들링해준다HTML 파일에 번들 파일 지정하기
// build/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./bundle.js"></script>
</body>
</html>
CSS 파일 번들링하기 위한 로더 설치
// style-loader, css-loader 라이브러리를 사용하면, css 파일도 번들링할 수 있다.
npm install -D style-loader css-loaderjs 파일에 CSS 파일 추가하기
// index.js
import "./style.css"
Webpack 에 로더 적용하기
const path = require('path');
module.exports = {
entry : ['./src/index.js', './src/test.js']
output: {
filename : 'bundle.js',
path : path.resolve(__dirname + '/build')
},
mode : 'none'
// 모듈 추가
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
};CSS파일 번들링
webpack
반응형
