Geração de Layout HTML no Webpack
Na lição anterior, instalamos e configuramos o HtmlWebpackPlugin. Agora, durante a build, um arquivo de layout HTML será gerado automaticamente para nós e, neste layout, os scripts e estilos serão conectados automaticamente.
Vamos tentar o caso mais simples. Suponha que temos um único ponto de entrada:
export default {
entry: './src/index.js',
plugins: [
new HtmlWebpackPlugin(),
],
};
Como resultado, após a build, nosso JavaScript
será compilado em um bundle com o nome main.js
e este bundle será conectado ao layout do site
criado automaticamente:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
<script defer src="main.js"></script>
</head>
<body>
</body>
</html>
Execute a build com o HtmlWebpackPlugin habilitado. Verifique se o arquivo de layout aparece para você. Estude seu código-fonte. Abra o arquivo no navegador.
