웹팩은 모듈 번들러이며, 자바스크립트 파일들을 모듈로 관리하는데서 출발한다.
자바스크립트 파일들이 많아지면 하나로 관리하는 것이 힘들어지고, 이것들을 브라우저에 로딩하는 것 또한
많은 네트워크 비용이 발생하게 된다.
그래서 이러한 파일들을 모듈화하여 즉시함수호출 스타일로 변경해주고, 하나의 파일로 묶어(bundled) 네트워크 비용을 최소화 할 수 있는 방법이 필요하고 이것이 웹팩의 기능이다.
웹팩의 config 파일 예시를 보자
webpack.config.js
const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
entry: {
main: './src/index.js'
},
output: {
filename: 'bundle.js',
path: path.join(__dirname, './dist')
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}, {
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
}]
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin('style.css')
]
};
웹팩을 사용하기 위해서는 위와 같이 해당 config 파일을 사용자가 원하는 방식으로 설정해주어야 한다.
React CRA에서도 웹팩을 통해서 build 파일을 생성하는데, CRA에서는 해당 관련 파일들이 숨겨져 있어서 보이지 않지만 CRA를 사용해 본적이 있다면 웹팩을 사용했던 것이다.
웹팩의 주요 4가지 개념을 살펴보자
웹팩은 파일단위 혹은 번들된 결과물을 처리하기도 한다.
웹팩은 시작하는 지점을 설정하여 그 지점으로부터 연결된 파일들을 번들링한다.
연결된 파일들을 사용자가 config에서 지정한 설정에 따라 결과물을 만들어 내게 된다.
여기서 시작하는 지점을 설정하는 것이 엔트리,
번들 결과물 저장 장소가 아웃풋,
결과물을 산출해 내기 위한 설정들을 로더와 플러그인이라고 한다.
여기서 로더는 파일단위로 처리며 플러그인은 번들된 결과물을 처리하는 역할을 한다.
엔트리
웹팩은 자바스크립트 파일, 스타일시트, 이미지, 폰트 등 모든 파일을 자바스크립트 모듈로 로딩해서 사용한다.
그리고 그 관련된 파일들을 import해서 사용하고 있는 메인 파일을 시작점으로 두고 하나의 모듈로 만들기 위해서 번들링을 하게 된다.
이러한 시작점이 되는 메인 파일을 지정하는 것이 엔트리이다.
웹팩 설정파일에서 보면
webpack.config.js
module.exports = {
entry: {
main: "./src/index.js",
},
}이렇게 설정했다는것은, html 내에서 사용할자바스크립트의 시작점은 src/index.js라는 의미이다.
아웃풋
엔트리를 설정하고 번들링을 하고 난후의 결과를 저장하기 위한 공간을 지정해주는 부분이다.
webpack.config.js
module.exports = {
output: {
filename: "bundle.js",
path: "./dist",
},
}
위와 깉이 설정하여 dist 폴더에 bundle.js 파일로 결과를 저장하도록 한다.
그래서 이렇게 번들링한 해당 파일을 html 파일에서 로딩해서 사용할 수 있게 된다.
index.html
<body>
<script src="./dist/bundle.js"></script>
</body>
로더
로더(Loader)는 웹팩이 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 웹 자원(HTML, CSS, Images, 폰트 등)들을 변환할 수 있도록 도와주는 속성이다.
로더는 test와 use 키로 구성된 객체로 설정할 수 있다. test는 로딩할 파일을 지정하고, use는 적용할 로더를 설정하게 된다.
예를들어 바벨을 사용하여 es6 -> es5로 변환하는 상황이라고하자.
그렇다면 test에는 es6로 작성한 자바스크립트 파일들을 지저하고,
use는 변환해줄 바벨로더로 설정한다.
webpack.config.js:
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: "node_modules",
use: {
loader: "babel-loader",
options: {
presets: ["env"],
},
},
},
],
},
}위 config 파일에서 test는 정규식으로 표현하여 모든 js 확장자 파일을 가리키고,
exclude를 사용하여 패키지 폴더인 node_module을 제외시킨다.
그리고 use에 로더를 설정하는데 babel-loader를 추가한다.
로더를 사용하기위해서는 노드 패키지로 제공하는 로더를 npm으로 추가해야한다.
npm i --save-dev babel-loader babel-core babel-preset-env웹팩 커맨드 라인으로 빌드하고 나면 bundle.js가 es5문법으로 변경된 것을 알 수 있다.
CRA에 기본적으로 깔려있는 로더 중에 또 하나인 css-loader를 하나 더 보자
웹팩은 모든 것을 모듈로 다루기 때문에 css파일을 자바스트립트로 변해서 로딩해야한다. css-loader가
그런 역할을 한다.
css-loader를 적용한 뒤 번들링하면 다음처럼 css코드가 자바스트립트 코드로 변환된 것을 볼 수 있다.
dist/bundle.js
// module
exports.push([module.i, "body {\n background-color: green;\n}\n", ""])이렇게 모듈로 변경된 스타일스트는 돔에 추가되어야만 브라우저가 해석할 수 있다.
그래서 style-loader를 사용하게 되는데 style-loader는 자바스크립트로 변경된 스타일시트를 동저으로 돔에 추가해주는 로더이다. 보통 css를 번들링하기 위해서는 css-loader, style-loader를 함께 사용한다.
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
}그리고 해당 로더를 npm으로 추가해준다.
npm install --save-dev css-loader
npm install --save-dev style-loader플러그인
웹팩에서 알아야할 마지막 개념은 플러그인이다.
로더가 파일단위로 처리하는 반면 플러그인은 번들된 결과물을 처리한다.
번들된 자바스크립트를 난독화하거나 특정 텍스트를 추출하는 용도로 사용할 수 있다.
웹팩에는 여러가지 플러그인들이 있는데,
플러그인 종류들은 아래 주소에서 확인할 수 있다.
https://github.com/webpack-contrib/awesome-webpack#webpack-plugins
webpack-contrib/awesome-webpack
A curated list of awesome Webpack resources, libraries and tools - webpack-contrib/awesome-webpack
github.com
여러가지 플러그인 중 UglifyJsPlugin을 살펴보자
UglifyJsPlugin은 로더로 처리된 자바스트립트 결과물을 난독화하는 플러그인이다.
플러그인을 사용하기 위해서는 웹팩 설정 객체의 plugin 배열에 추가해주면 된다.
const webpack = require("webpack")
module.exports = {
plugins: [new webpack.optimize.UglifyJsPlugin()],
}
'개발👩💻 > 프론트엔드' 카테고리의 다른 글
| 이미지 최적화 및 성능 개선 (0) | 2022.07.04 |
|---|---|
| V8엔진 작동 방식 feat 웹 어셈블리 (0) | 2022.05.20 |
| vertical percentage bar 바닥부터 채우기 (0) | 2022.04.21 |
| next: link # anchor 사용하기 (0) | 2022.03.31 |
| react: intersection observer 사용기 (0) | 2022.03.31 |
