Seu próprio arquivo de layout no Webpack
Na prática, normalmente já temos nosso próprio layout HTML do site. Nesse caso, precisamos que o Webpack use nosso layout, e não gere o seu próprio. Vamos ver como isso é feito.
Suponha que temos o seguinte layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My layout</title>
</head>
<body>
</body>
</html>
Vamos fazer o Webpack usar nosso layout. Para isso, vamos configurá-lo na seguinte configuração:
export default {
entry: './src/index.js',
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
],
};
Como resultado, após a build, na pasta
dist estará nosso layout e nele
todos os bundles serão automaticamente
incluídos:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My layout</title>
<script defer src="main.js"></script>
</head>
<body>
</body>
</html>
Crie seu próprio layout. Configure o Webpack para que ele use seu layout.