티스토리 뷰
plugin의 정의
웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성이라고 할 수 있다.
웹팩에는 두가지의 확장 기능이 있다.
첫번째는 로더, 두번째는 플러그인이다.
로더는 모듈을 최종적인 아웃풋으로 만들어가는 과정에서 사용하는 것이며 플러그인은 최종적인 결과물을 변형하는 것이라고 할 수있다.
plugin의 종류
1. htmlwebpackplugin이란?
웹팩으로 컴파일한 정적 파일 들(js,css, 이미지 등)을 특정 html파일에 <script> 나 <head> 태그 등을 자동으로 생성하여 해당 정적파일을 삽입하여 새로운 html파일을 특정 위치(예 : 흔히 dist폴더에 생성한다.)에 생성해주는 플러그인을 의미한다.
특정 html 파일을 js나 css, 이미지 등과 함께 웹팩으로 번들링하여 최종적으로 새롭게 완성된 html을 얻고자 한다.
모듈 다운로드 방법은 다음과 같다.
우선 npm install --save-dev html-webpack-plugin을 통해 해당 플러그인을 다운로드한다.
다운로드 후 해당 html파일에서 js를 의존하고 있는 script 태그가 있으면 지워둔다.
그리고 webpack.config.js파일에서 다음과 같이 새로운 변수를 만들어 해당 플러그인을 의존하도록 한다.
// webpack.config.js파일
// ...
const HtmlWebpackPlugin = require('html-webpack-plugin')
// ...
module.exports = {
// ...
plugins: [
// ...
new HtmlWebpackPlugin({
// 번들링하고자 하는 html파일의 경로와 이름
template:"./src/index.html"
// 번들링하여 새롭게 생성되는 파일의 경로와 이름(dist폴더의 하위경로부터 적으면 된다.)
filename:"./index.html"
})
// ...
]
// ...
}
한편 entry가 다음과 같다고 하자.
// webpack.config.js파일
// ...
entry: {
index : './src/index.js',
about : './src/about.js'
},
// ...
여기서 웹팩을 실행할 때 문제점은 index.html에 index.js 이외에 연관이 없는 js파일인 about.js 파일이 함께 들어갈 수 있다.
만약 index.html에는 index.js의 번들링 파일만 의존하도록 하기 위해서는 filename 다음으로 chunks : ['index']를 아래와 같이 입력한다.
// webpack.config.js파일
// ...
new HtmlWebpackPlugin({
template: "./src/index.html",
filename: "./index.html",
chunks: ['index']
})
// ...만약 두개의 html 파일(index.html, about.html)이 있다고 하자. 각각 번들링하고자 할 때 index.html은 index.js만을 의존하고 about.html은 about.js만 의존하도록 하고 싶으면 아래와 같이 하나 더 만들면 된다.
// webpack.config.js파일
// ...
new HtmlWebpackPlugin({
template: "./src/index.html",
filename: "./index.html",
chunks: ['index']
})
new HtmlWebpackPlugin({
template:"./src/about.html",
filename:"./about.html",
chunks:['about']
})
// ..
그리고 HtmlWebpackPlugin의 옵션 중 inject가 있다.
이 옵션의 값을 'body'로 하면 번들링된 js파일만은 body태그의 맨 아래에 자동삽입되게 해준다.
번들링된 css파일은 기본적으로 head 태그 안에 자동 삽입된다.
코드는 다음과 같다.
// webpack.config.js파일
// ...
new HtmlWebpackPlugin({
template: "./src/index.html",
filename: "./index.html",
inject: 'body',
chunks: ['index']
})
new HtmlWebpackPlugin({
template:"./src/about.html",
filename:"./about.html",
inject: 'body',
chunks:['about']
})
// ..
2. mini-css-extract-plugin
여러 css를 하나의 css파일로 번들링하여 새로운 파일을 생성해주는 플러그인이다.
npm install --save-dev mini-css-extract-plugin으로 다운한다.
webpack.config.js 상단에 다음과 같이 입력을 한다.
// webpack.config.js
// ...
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// ...그 후
// webpack.config.js
module:{
//...
rules:[{
test: /\.css$/,
use: [
{loader: MiniCssExtractPlugin.loader},
'css-loader'
],
}]
// ...
},
plugins:[
new MiniCssExtractPlugin({ filename: 'index_bundle.css' });
]css-loader에서 처리한 결과물을 받아서 filename에 적힌 파일명으로 새로운 번들링 파일을 만들어준다.
웹팩을 실행하면 output에서 설정한 경로에 index_bundle.css가 생성된다.
이 파일을 link태그에 넣어주면 된다.
3. CleanWebpackPlugin
웹팩을 빌드하기 이전에 번들링 파일이 생성되는 곳(예 : dist폴더)에 있는 모든 번들링 파일들을 제거하는 플러그인이다.
웹팩을 빌드했을 경우 이전 번들링파일이 삭제되지 않아 그대로 남아있음으로 사용되지 않는 번들링 파일이 잔존하는 것을 해결해주는 플러그인이다.
설치 방법은 다음과 같다!
npm install --save-dev clean-webpack-plugin
설치 후 webpack.config.js에서 해당 플러그인을 require하는 변수를 선언한다.
// webpack.config.js
// ...
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// ...그 후 다음과 같이 webpack.config.js에 해당 플러그인 관련 코드를 작성한다.
// webpack.config.js
// ...
plugins: [
new CleanWebpackPlugin(),
]
// ...이상으로 설정이 끝났다.
빌드하면 번들링할 때 이전 번들링 파일이 삭제됨으로써 깜빡이는 것을 알 수 있을 것이다.
'Front-End > Webpack' 카테고리의 다른 글
| dev-server란 무엇인가? (0) | 2021.10.02 |
|---|---|
| mode란 무엇인가? (0) | 2021.10.02 |
| 자주 쓰는 loader 2(babel-loader feat.babel-polyfill) (1) | 2021.05.18 |
| 자주 쓰는 loader 1(css-loader, file-loader, url-loader, expose-loader) (0) | 2021.05.18 |
| entry와 output (0) | 2021.05.15 |