Hello Guys I’ve been working on creating a local dev env using Webpack to develop sites, the devServer.watchFiles was working until I installed the html-bundler-webpack-plugin I’ve tried all read all documentation everything looks fine but when I edit the html or scss files it does not reload them on the browser automatically. I even added plugins.watchfiles as you can see you below
const path = require('path');
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
module.exports = {
mode: 'development',
output: {
path: path.resolve(__dirname, 'dist'),
clean: true,
},
resolve: {
alias: {
'@scripts': path.join(__dirname, 'src/js'),
'@styles': path.join(__dirname, 'src/scss'),
'@images': path.join(__dirname, 'src/images'),
},
},
plugins: [
new HtmlBundlerPlugin({
// path to templates
entry: 'src/views/',
js: {
// output filename of compiled JavaScript
filename: 'js/[name].[contenthash:8].js',
},
css: {
// output filename of extracted CSS
filename: 'css/[name].[contenthash:8].css',
},
watchFiles: {
paths: ['./src'],
files: [/.(html|ejs|eta)$/],
ignore: [
/[\/](node_modules|dist|test)$/, // ignore standard project dirs
/[\/]..+$/, // ignore hidden dirs and files, e.g.: .git, .idea, .gitignore, etc.
/package(?:-lock)*.json$/, // ingnore npm files
/webpack.(.+).js$/, // ignore Webpack config files
/.(je?pg|png|ico|webp|svg|woff2?|ttf|otf|eot)$/, // ignore binary assets
],
}
}),
],
module: {
rules: [
{
test: /.(scss)$/,
use: ['css-loader', 'sass-loader'],
},
{
test: /.(ico|png|jp?g|svg)/,
type: 'asset',
generator: {
filename: 'images/[name].[hash:8][ext]', // save to file images >= 2 KB
},
parser: {
dataUrlCondition: {
maxSize: 2 * 1024, // inline images < 2 KB
},
},
},
],
},
// enable live reload
devServer: {
static:{
directory: path.resolve(__dirname, 'dist')
},
watchFiles: {
paths: ['src/**/*.*'],
options: {
usePolling: true,
},
},
port:3000,
open: true,
// hot:true,
// compress:true,
// HistoryApiFallback:true,
},
// watchOptions: {
// poll:true,
// ignored: /node_modules/,
// },
};