Here is my settings for webpack and packages json . I am using 2 entry points for html files. Somehow HMR reloades page with css and js changes, but not with html content changes. I've tried a lot of suggestions from stackoverflow and github issues, nothing helped. I will be appreciated for any help.
const isDev = process.env.NODE_ENV === "development"
const filename = ext => isDev ? `[name].${ext}` : `[name].[contenthash].${ext}`;
const plugins = [
new HTMLWebpackPlugin({
template: 'index.html',
favicon: './favicon.ico',
filename: 'index.html',
minify: {
collapseWhitespace: !isDev
},
chunks: ['main']
}),
new HTMLWebpackPlugin({
template: './another.html',
favicon: './favicon.ico',
filename: 'another.html',
minify: {
collapseWhitespace: !isDev
},
chunks: ['analytics']
}),
new MiniCssExtractPlugin({
filename: filename('css'),
}),
new CleanWebpackPlugin(),
new webpack.HotModuleReplacementPlugin(),
]
const cssLoaders = (loader) => {
const loaders = [
{ loader: MiniCssExtractPlugin.loader },
'css-loader'
];
if (loader) { loaders.push(loader) }
return loaders
}
module.exports = {
context: path.resolve(__dirname,'src'),
mode: 'development',
target: process.env.NODE_ENV === "development" ? "web" : "browserslist",
entry: {
main: {
import: ['@babel/polyfill', './index.js']
},
analytics: ['./analytics.js'],
},
output: {
filename: filename('js'),
path: path.resolve(__dirname, 'dist'),
chunkFilename: "[name].bundle.js"
},
resolve: {
extensions: ['.js','.json','.png'],
alias: {
'@assets': path.resolve(__dirname, 'src/assets'),
'@js': path.resolve(__dirname, "src/js"),
'@css': path.resolve(__dirname, "src/css")
}
},
devServer: {
historyApiFallback: true,
open: true,
compress: true,
hot: true,
port: 5000,
inline: true,
},
plugins,
devtool: isDev ? 'source-map' : false,
optimization: {
splitChunks: {
chunks: 'all'
},
runtimeChunk: 'single',
minimize: !isDev,
minimizer: [
new CssMinimizerPlugin(),
new TerserPlugin()
],
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-class-properties']
}
}
},
{
test: /\.css$/,
use: cssLoaders()
},
{
test: /\.s[ac]ss$/i,
use: cssLoaders('sass-loader')
},
{
test: /\.(png|jpg|svg|gif)$/,
use: [{
loader: 'file-loader',
options: {
name: "[name].[ext]"
}
}]
},
{
test: /\.(ttf|woff|woff2|eot)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
}
]
},
]
}
}
and `package.json` scripts
{
"scripts": {
"dev": "cross-env NODE_ENV=development npx webpack --mode development",
"build": "cross-env NODE_ENV=production npx webpack --mode production",
"watch": "cross-env NODE_ENV=development npx webpack --mode development --watch",
"server": "cross-env NODE_ENV=development webpack serve --mode development --open"
}
}