๋ฒ๋ค๋ง ๊ณผ์ ์ค์ ๊ฐ๋ฐ์๊ฐ ์ํ๋ ๋ค์ํ ์์ ์ ํ ์ ์๋๋ก ๋์์ฃผ๋ ์ญํ ์ ํ๋ค.
ํ๋ฌ๊ทธ์ธ์ ๋ก๋์ฒ๋ผ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ๋ก ๋ถ๋ฌ์ค๋ ์์ ์ ์๋์ง๋ง, ๋ฒ๋ค๋ง์ ์ ์ฉํ ๋ค์ํ ํด์ ์ ์ฉํ ์ ์๋ค.
html-webpack-plugin
์ ๋ฒ๋ค๋ง ๊ณผ์ ์ค html ํ์ผ์ ์์ ์ด ์ํ๋ ํํ๋ก ๊ฐ๊ณตํ์ฌ ๋ฒ๋ค์ ํฌํจํ ์ ์๊ฒ ๋์์ค๋ค.
html ํ์ผ๋ ๋ฒ๋ค๋ง์ ํฌํจ์ํค๊ธฐ ์ํด ํ๋ฌ๊ทธ์ธ์ ์ฌ์ฉํ๊ณ ์ ํ๋ค.
dist/index.html
์ src ๋๋ ํฐ๋ฆฌ๋ก ์ฎ๊ฒจ๋๋ค.
html-webpack-plugin
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin') // ํ๋ฌ๊ทธ์ธ ๋ถ๋ฌ์ค๊ธฐ
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "app.bundle.js",
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
exclude: /node_modules/,
},
],
},
//ํ๋ฌ๊ทธ์ธ ์์ฑ
plugins: [new HtmlWebpackPlugin({
template: path.resolve(__dirname, "src", "index.html")
})]
};
npm run build
๋ฅผ ํตํด ํ์ผ ๋ฒ๋ค๋ง์ ์คํํ๋ฉด
dist/index.html
ํ์ผ์ด ์๋์ผ๋ก ์์ฑ๋ ๊ฒ์ ํ์ธํ ์ ์๋ค.
ํ๋ฌ๊ทธ์ธ์ ํตํด ์๋์ ๊ฐ์ ์คํฌ๋ฆฝํธ ์์๊ฐ ์๋์ผ๋ก ์ถ๊ฐ๋์๋ค.
<script defer="defer" src="app.bundle.js"></script>