I new to webpack. I am using node.js as a server and want to server send file as a response. For route / I want to send index.html, for route /other I want to send other.html, and so on...
At the moment all html files calls js files using <script>. For example, index.html contains <script src='../index.js'></script>.
Few days ago I was introduced with webpack. My webpack config is as following
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const commonHtmlPluginProps = {
inject: false,
minify: {
removeAttributeQuotes: true,
minifyJS: true,
removeComments: true,
collapseBooleanAttributes: true,
collapseWhitespace: true,
sortClassName: true
}
}
module.exports = {
mode: 'production',
entry: {
// index: './src/index.js',
// another: './src/another.js',
// other: './src/other.js',
index: './src/html/index.html',
another: './src/html/another.html',
other: './src/html/other.html',
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'src', 'html', 'index.html'),
ouptutName: 'index.html',
...commonHtmlPluginProps,
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'src', 'html', 'another.html'),
filename: 'another.html',
...commonHtmlPluginProps,
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'src', 'html', 'other.html'),
filename: 'other.html',
...commonHtmlPluginProps,
}),
],
module: {
rules: [
{
test: /\.html$/,
use: ['html-loader']
}
],
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].[contenthash].js'
},
}
and I have following file structure
Whenever I rebuild the project I get two copies of js files, even though my entry is from html files.
Where I am mistaken? Suggest me a better way. Thanks in advance!