티스토리 뷰

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에 넣어두는게 보기 더 용이한 것 같다.

저작자표시

'Javascript' 카테고리의 다른 글

VS code 플러그인(익스텐션) 만들기, 한글 초성만 쳐도 한글 변수 찾아주는 플러그인(1)  (1) 2021.02.04
tsconfig-paths-webpack-plugin  (0) 2021.02.02
ts-loader, typescript 적용  (0) 2021.02.01
React Native에서 WebView에서 Android 백버튼 처리(히스토리 백처리)에 대하여  (1) 2021.01.28
Javascript의 팩토리 패턴  (0) 2021.01.22
WebView의 디버깅  (0) 2021.01.20
최상위 window의 parent  (0) 2021.01.19
Promise 내의 async  (1) 2021.01.07
댓글