안녕하세요. 김용성입니다.
webpack에는 2가지 형태의 확장 기능이 존재합니다.
그 중 하나는 지난 포스팅에서 사용했던 loader이고 다른 하나는 plug-in인데요.
오늘은 plug-in에 대해 알아보고 그 중 가장 많이 사용되는 html-webpack-plugin을 적용해보도록 하겠습니다.
plug-in이란?
지난 번에 배웠던 loader가 여러개의 asset파일들을 최종적인 output으로 만들어가는 과정에서 사용되는 것이라면 플러그인(plug-in)은 그렇게 해서 만들어진 결과물을 변형하는 데에 사용되는 것입니다. loader에 비해서 강력하다고 볼 수 있습니다. 여러개의 asset 파일들이 존재한다면 loader는 각각의 파일을 모듈화 할때마다 호출되지만, plug-in은 최종 한번만 호출되기 때문이죠.
html-webpack-plugin 적용
html-webpack-plugin은 html 파일을 동적으로 생성할 수 있는 플러그인입니다.
해당 플러그인을 사용하면 index.html에서 js file을 로드하는 부분을 삭제해도 되죠.
사용할 html 파일을 template로 지정 후에 사용하면 빌드 결과물이 생성되는 output 폴더에 index.html 파일이 생성되며, 여러 옵션을 통해 생성될 html 파일에 원하는 처리를 해줄 수 있습니다.
사용법은 간단합니다.
우선 해당 plug-in을 npm을 통해 설치해주겠습니다.
$ npm install -D html-webpack-plugin
그 후에 우리의 index.html파일에서 script를 통해 JavaScript 파일을 받아오던 부분을 삭제해줍니다.
//index.html
<html>
<body>
<h1>Webpack practice</h1>
<div id='root'></div>
</body>
</html>또한 index.html파일을 source 디렉토리 내부로 옮겨주세요.
이제 configuration 파일을 건드릴 차례입니다.
plugin은 loader와는 달리 module 필드 내부에 선언하는 것이 아닌 그 밖에 별도의 필드로 선언을 해주어야 합니다.
변경된 webpack.config.js 파일은 다음과 같습니다. 사용법은 간단해요.
//webpack.config.js
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin") // module 사용
module.exports = {
mode: "development",
entry: "./source/index.js",
output: {
path: path.resolve(__dirname, "public"),
filename: "main.js",
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
plugins: [new HtmlWebpackPlugin()], //plugin 추가
}
그 후에 public 디렉토리에 기존에 만들어놓았던 main.js파일을 삭제해준 뒤 webpack 명령어를 실행해주세요~
$ npx webpack
public 폴더 내부에 main.js와 더불어 index.html이 생성된 것을 보실 수 있죠??
그 내부의 코드를 살펴보면 다음과 같습니다.
// public/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack App</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><script defer src="main.js"></script></head>
<body>
</body>
</html>우리가 기존의 index.html 파일에서 JavaScript 파일을 연결하는 script 태그를 삭제했음에도, plugin을 사용하니 다음과 같이 script 태그가 들어가있음을 확인할 수 있습니다.
마무리
plugin의 종류는 워낙 많기 때문에 다음 webpack 포스팅에서는 여러 옵션과 더불어서 다른 plugin들도 사용해보도록 하겠습니다. 감사합니다.
