plugin
플러그인은 웹팩이 동작하는 자체적인 과정에 개입할 수 있어 웹팩이 동작하는 과정 전반적으로 광범위한 작업을 수행할 수 있습니다. 번들파일에 변화를 주거나 최적화하고, 애셋을 관리하고 또 환경변수 주입등과 같은 작업을 수행할 수 있습니다.
plugin은 require()을 통해 플러그인을 요청하고 plugins 라는 key를 시작으로 설정할 수 있습니다. 이번에는 HtmlWebpackPlugin 을 사용해 볼 예정입니다. 이 플러그인은 번들러를 위한 html 파일을 자동으로 만들어주고 설정해줍니다.
플러그인은 loader 와 다르게 webpack package 내부에 있는 plugin과 외부 저장소에서 관리되는 plugin으로 나뉩니다. 이번에 사용하는 HtmlWebpackPlugin 은 외부저장소에 있는 plugin이기 때문에 설치를 먼저 진행해줍니다.
HtmlWebpackPlugin설치
$ npm install --save-dev html-webpack-plugin이 명령어는
$ npm i -D html-webpack-plugin으로 축약해서 사용할 수 있습니다. (install → i, —save-dev → -D )
다음으로는 설치한 plugin 모듈을 불러와 적용해보도록 합니다.
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
entry: './src/index.js',
output: {
filename : 'bundle.js',
path : path.resolve(__dirname, 'dist'),
},
module:{
rules:[
{
test:/\.css$/i,
use:[
{
loader : 'style-loader',
options:{
injectType : 'singletonStyleTag'
}
},
{
loader : 'css-loader',
options:{
modules:true
}
}
],
}
]
},
// 아래 추가
plugins : [
new HtmlWebpackPlugin({
template: './template.html'
})
],
mode:'none'
// --------------------
}plugin 의 key들 중에 template이라는 key를 사용했습니다.
template은 자동으로 생성되는 html 문서가 특정 파일을 기준으로 생성되게 지정해주는 역할을 합니다.
우리는 이전에 만든 index.html 을 열어
//index.html -> template.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Getting Started</title>
</head>
<body>
</body>
</html>기존에 작성했던 내용중 script 태그를 지울 것입니다.
그리고 index.html 의 파일 이름을 template.html로 변경해줍니다.
그럼 실제로 html파일을 잘 생성해주는지 확인해봅시다.
$ npx webpackdist/index.html 이 생겼는지 확인해봅니다.
만약 이전에 진행했던 실습 때문에 dist > index.html 파일이 있다면 열어서 바뀐부분이 있는지 확인해보거나 dist > index.html 을 지우고 다시 번들링 해보세요.
생성된 html 파일은 webpack 설정 파일에서 output 에 번들파일이 어디에 위치해있고, 파일 이름을 무엇으로 설정했는지를 이용해서 번들된 리소스를 불러올 수 있도록 srcript 태그나 link 태그를 추가해줍니다.
webpack 에는 많은 플러그인 인터페이스가 있습니다. https://webpack.kr/plugins/ 을 참고하세요.
'react' 카테고리의 다른 글
| TestDome React Focusable Input (0) | 2021.08.20 |
|---|---|
| TestDome React Change Username (0) | 2021.08.20 |
| Webpack이 뭔데!! (4) (0) | 2021.08.04 |
| Webpack이 뭔데!!(3) (0) | 2021.08.02 |
| Webpack이 뭔데!!(2) (0) | 2021.08.01 |
댓글