Własny plik layoutu w Webpack
W praktyce zwykle mamy już własny HTML layoutu strony. W tym przypadku potrzebujemy, aby Webpack brał nasz layout, a nie generował swój. Spójrzmy, jak to się robi.
Załóżmy, że mamy następujący layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My layout</title>
</head>
<body>
</body>
</html>
Zmusimy Webpack do wzięcia naszego layoutu. Aby to zrobić, wpiszmy go w następującej konfiguracji:
export default {
entry: './src/index.js',
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
],
};
W rezultacie po budowaniu w folderze
dist będzie nasz layout i w nim
automatycznie będą podłączone
wszystkie bundle:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My layout</title>
<script defer src="main.js"></script>
</head>
<body>
</body>
</html>
Zrób swój layout. Skonfiguruj Webpack tak, aby brał twój layout.