Javascript
Webpack에서 이미 있는 index.html 수정
딩신
2021. 1. 27. 21:49
webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
filename: "[name].js",
path: path.resolve(__dirname, "dist")
},
plugins: [new HtmlWebpackPlugin({
template: path.join(__dirname, './public/index.html'),
inject: true
})]
}; html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>계산기2</title>
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="#4285f4">
</head>
<body>
<div id="root"></div>
</body>
</html>
html-webpack-plugin 을 사용했고
더 많이 옵션을 줌에 따라서 다양하게 커스텀 할 수 있다.
html을 webpack에 직접 작성할수도 있지만 효율적이지도 않고, 꼭 필요한 코드들 외에는 저기에 넣는게 따로만든 html에 넣어두는게 보기 더 용이한 것 같다.