I know this question gets asked a million times but I've been through plenty of other answers and still can't seem to find a solution.
Put simply, my webpack live browser reload doesn't work, so every time I make a change I have to manually hit refresh in the browser.
Can anyone help?
Just to be clear, it's just browser reloading that I need - I don't need Hot Module Replacement at this stage.
Here's my webpack.config.js
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const autoprefixer = require("autoprefixer");
const nodeExternals = require("webpack-node-externals");
const isDevelopment = process.env.NOD_ENV !== "production";
module.exports = {
mode: "development",
entry: path.resolve(__dirname, "./src/app.js"),
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "./dist")
},
target: "node",
externals: [nodeExternals()],
devtool: isDevelopment && "source-map",
devServer: {
port: 3000,
open: true,
contentBase: path.join(__dirname, "./src"),
watchContentBase: true,
liveReload: true,
inline: true
},
module: {
rules: [
{
test: /\.html$/,
use: {
loader: "html-loader"
}
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.(scss|css)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
sourceMap: true
}
},
{
loader: "postcss-loader",
options: {
autoprefixer: {
browsers: ["last 2 versions"]
},
sourceMap: true,
plugins: () => [autoprefixer]
}
},
{
loader: "sass-loader",
options: {
sourceMap: true
}
}
]
},
{
test: /\.(jpg|png|gif|mp4)$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "static/",
useRelativePath: true
}
},
{
loader: "image-webpack-loader",
options: {
mozjpeg: {
progressive: true,
quality: 65
},
optipng: {
enabled: true
},
pngquant: {
quality: "65-90",
speed: 4
},
gifsicle: {
interlaced: false
},
webp: {
quality: 75
}
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name]-styles.css",
chunkFilename: "[id].css"
}),
new HtmlWebpackPlugin({
inject: true,
hash: true,
template: "./src/index.html",
filename: "index.html"
})
]
};
And my file structure, if it helps
