Webpack.config.js
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.[contenthash].js',
path: path.resolve(__dirname, './dist'),
publicPath: ''
},
mode: 'none',
module: {
rules: [
{
test: /\.(png|jpg)$/,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 3 * 1024
}
}
},
{
test: /\.txt/,
type: 'asset/source'
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader, 'css-loader'
]
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [ '@babel/env' ],
plugins: [ '@babel/plugin-proposal-class-properties' ]
}
}
},
{
test: /\.hbs$/,
use: [
'handlebars-loader'
]
}
]
},
plugins: [
new TerserPlugin(),
new MiniCssExtractPlugin({
filename: 'styles.[contenthash].css'
}),
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: [
'**/*',
path.join(process.cwd(), 'build/**/*')
]
}),
new HtmlWebpackPlugin({
title: 'Hello world',
template: 'src/index.hbs',
description: 'Some description'
})
]
};
index.hbs:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{{htmlWebpackPlugin.options.title}}</title>
<meta name="description" content="{{htmlWebpackPlugin.options.description}}">
</head>
<body>
</body>
</html>
index.js is a normal js file where i am creating a div element and adding to body using document.create and element.append()
The output HTML file is as below (in dist folder js and CSS files are also generated, below is the mentioned HTML file, I get confuse after seeing this)
<!doctype html>
<html>
<head>
<script defer="defer" src="HelloWorld.js"></script>
<script defer="defer" src="KiwiImange.js"></script>
<link href="styles.f0d435b9fa1daba6e1e0.css" rel="stylesheet">
<link href="styles.8d63166eca726ba4ffeb.css" rel="stylesheet">
</head>
<head>
<meta charset="utf-8">
<title>My new app</title>
<meta name="description" content="My" new description>
<meta name="viewport" content="width=device-width,initial-scale=1">
<body></body>
</head>
</html>
Why i am getting two heads tab in above mentioned file?
