1. Loader
webpack은 기본적으로 자바스크립트 모듈을 bundle 해주는데, Loader을 이용하면 다른 확장자 파일들도 같이 bundle 해줄 수 있다.
예를 들어 js, css를 bundle해보자.
다음 예제는 엔트리파일(index.js)과 css파일(reverse.css)을 같이 bundle하는 것이 목표이다.
다음 webpack문서를 보면 CSS파일을 로딩하는 방법을 알 수 있다.
webpack.js.org/guides/asset-management/#loading-css
Asset Management | webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
webpack.js.org
js외의 다른 확장자 파일과 bundle하기 위해서는 확장자별 loader이 설치되어 있어야 하는데, style-loader과 css-loader을 설치하라고 한다. 그리고 문서에서 알려준대로 module옵션과 그 하위 옵션들도 추가해보자.
style-loader, css-loader 설치
webpack.config.js - module옵션과 그 하위 옵션들 추가
정규식으로 css파일인지 여부를 test해서 맞다면 css-loader, style-loader을 순서대로(역순으로 반영됨) 사용하게 한다는 의미이다.
const path = require('path')
module.exports = {
mode : "production",
entry:"./index.js",
output:{
path:path.resolve(__dirname, "bundle"),
filename:'index_bundle.js'
},
module: {
rules: [
{
test: /\.css$/i, //정규식
use: [
'style-loader',
'css-loader'
]
}
]
}
};
index.js
그리고 reverse.css도 같이 bundle하기 위해, entry파일(index.js)에도 css모듈을 추가했다.
※ npm으로 설치한 라이브러리도 import로 모듈을 추가해서 bundle가능하다.
import s1 from "./p1.js";
import s2 from "./p2.js";
import s3 from "./p3.js";
import css from "./reverse.css";
document.querySelector("#text").innerHTML=s1+" "+s2+" "+s3;
bundle의 사전 작업이 모두 끝났으니 이제 npx webpack명령을 실행하자.
그러면 다음과 같이 bundle파일이 생성되었을 것이다.
test.html
방금 생성한 bundle파일을 script에 적용해주면 끝이다.
<!doctype html>
<html>
<body>
<h1 id="text">...</h1>
<script src="bundle/index_bundle.js"></script>
</body>
</html>
실행해보니 reverse.css파일이 로드되지 않고도 잘 적용된 모습을 볼 수 있었다.
이 예제는 css파일을 같이 bundle해보는 예제였다.
css외에도 여러 확장자 파일을 bundle하고 싶다면 webpack문서를 참조하면 된다.
(이미지1) webpack.js.org/guides/
(이미지2) webpack.js.org/loaders/
2. Plugin
플러그인은 webpack의 결과물에 추가적인 기능을 주는 속성이다.
플러그인의 예제를 다뤄보기엔 플러그인마다 용도가 너무 다르기 때문에, 대신 기본적인 플러그인 적용법과 자주 사용되는 플러그인은 어떤 것들이 있는지 설명하고자 한다.
1) 적용법
설정 파일
//require something
module.exports = {
plugins: [] //플러그인 객체 배열
}
2) 자주 사용되는 플러그인
- CleanWebpackPlugin : 빌드의 이전 결과물을 제거하는 플러그인
- HtmlWebpackPlugin : css, js파일을 각각 html코드의 link, script태그에 넣는 작업을 자동화 해주는 플러그인
- BannerPlugin : 결과물에 추가 정보를 덧붙이는 플러그인
- DefinePlugin : 모든 javascript에서 사용 가능한 전역 변수를 선언할 수 있게 해주는 플러그인
- EnvironmentPlugin : process.env의 환경 변수를 모든 javascript에서 사용 가능한 전역 변수로 등록해주는 플러그인
- MiniCssExtractPlugin : javascript에 포함된 css를 별도의 css파일로 추출하는 플러그인, style태그보다 css파일을 선호한다면 style-loader대신 MiniCssExtractPlugin.loader을 사용할 수 있음
3) webpack plugin 문서
Plugins | webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
webpack.js.org
'Webpack' 카테고리의 다른 글
| [Webpack] config 파일(1) - entry, output, mode (0) | 2021.04.16 |
|---|---|
| [Webpack] Webpack 사용법 (0) | 2021.04.15 |
| [Webpack] Webpack 소개 (0) | 2021.04.15 |
댓글