Tempo Di Valse

[Webpack] JS 내용을 HTML 에 Inline 으로 넣어보자 (InlineChunkHtmlPlugin) 본문

개발/Web

[Webpack] JS 내용을 HTML 에 Inline 으로 넣어보자 (InlineChunkHtmlPlugin)

TempoDiValse 2022. 2. 16. 12:20

우선 출처는 Facebook 에서 개발한 InlineChunkHtmlPlugin 으로, React 와 관련되어 페이스북에서 개발한 Webpack Plugin 인 것 같다.

 

GitHub - facebook/create-react-app: Set up a modern web app by running one command.

Set up a modern web app by running one command. Contribute to facebook/create-react-app development by creating an account on GitHub.

github.com

 

보통 Webpack 을 실행하게 되면, 하나(혹은 여러 개)로 번들링이 된 js 파일을 내보내지게 되는데, 이번 포스팅에서 작성할 내용은 HtmlWebpackPlugin 을 사용하여 내보내진 HTML 파일 안에 js 파일의 내용을 Inline 형태로 함께 내보내는 방법을 담아보았다.

 

보통은 JS 파일 따로해서 HTML 파일에 <script src="[filename].js"></script> 형식으로 연결하는 것이 대부분이다. 그렇지만 특수한 경우에 인라인으로 필요할 때에는 이 플러그인을 사용하는 것도 좋은 것 같다.

 

먼저, HtmlWebpackPlugin 을 통해 내보낼 HTML 파일을 설정하도록 한다.

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

...

const htmlWebpackPlugin = new HtmlWebpackPlugin({
    template: 'template.hbs',
    filename: 'output.html',
    
    inject: false,
    minify: false,
});

여기서 template.hbs 를 통해 내보내질 HTML(output.html) 의 형태에 대해 정의를 할 필요가 있다.

// template.hbs

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
        <meta http-equiv="Pragma" content="no-cache">
        <meta http-equiv="Expires" content="-1">
        <meta http-equiv="Cache-Control" content="No-Cache">
    </head>
    <body>
    	<div>
        	Content
        </div>
        <%= htmlWebpackPlugin.tags.headTags %>
    </body>
</html>

이 파일에서 htmlWebpackPugin.tags.headTags 부분이 JS 내용이 Inline 으로 들어가는 부분이라고 할 수 있다.

위치를 지정해 준 다음, 원래의 소스로 돌아가서 IniineChunkHtmPugin 설정을 마저 하도록 한다.

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// npm 으로 다운 받은 것이 아니라 Github 에서 파일 소스를 긁어왔다.
const InlineChunkHtmlPugin = require('./plugins/InlineChunkHtmlPlugin');

...

const htmlWebpackPlugin = new HtmlWebpackPlugin({
    template: 'template.hbs',
    filename: 'output.html',
    
    inject: false,
    minify: false,
});

const inlineChunkHtmlPlugin = new InlineChunkHtmlPugin(HtmlWebpackPlugin, [
	new RegExp(`/${JS_FILENAME}/`)
]);

webpack({
    entry: [
    	'inline-1.js'
    ],
    
    output: {
        filename: `${JS_FILENAME}.js`
    },
    
    plugins: [
    	htmlWebpackPlugin,
        inlineChunkHtmlPlugin
    ]
});

webpack.run(/*...*/);

InlineChunkHtmlPlugin 에는 2개의 파라미터가 들어간다.

HtmlWebpackPlugin
해당 플러그인 을 후킹하여 동작하는 플러그인 이기 때문에 집어 넣어주는 것 같다.

[ new RegExp(`/${JS_FILENAME}/`) ]
파일명을 정규식으로 넘겨준다. Array 형태라 여러 파일 명을 넘겨줄 수 있고, 정규식이기 때문에 일정한 형식을 가진 파일도 정규식으로 넘겨줄 수 있다. 

플러그인의 소스를 확인해보면, 파일명이 들어가 있는 <script> 태그를 찾게 되며 해당되는 파일의 소스를 긁어 온 후 InnerHTML 로 뿌려준다는 식의 로직으로 작성이 되어있다.

 

그래서 output.html 에는 <script src="${JS_FILENAME}.js"> 가 작성되어지는 것이 아닌, 그 안의 소스 들이 복사된 것을 확인 할 수 있다.

 

반응형
저작자표시 비영리 변경금지

'개발 > Web' 카테고리의 다른 글

[Vue.js] 커스텀 RadioButton 만들어 보기  (0) 2022.02.23
[Vue.js] 커스텀 Checkbox 만들어보기  (0) 2022.02.17
[JS] A태그 내에서 Javascript 의 encodeURIComponent 사용 문제  (0) 2022.02.15
[JS] Daum 우편번호찾기를 이용한 위,경도 좌표 구하기  (0) 2022.02.08
[PHP] 위/경도를 이용한 거리 계산  (0) 2022.02.08
'개발/Web' Related Articles more
Comments