I have a problem with react webpack4 when i try to hot reload the changes fom certain files. And those files where the ones i modified from its original path (/from /src/containers to /src/components) Rest of files reloading working well... Code of my webpack config file is below:
const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const Dotenv = require('dotenv-webpack');
const htmlWebpackPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
module.exports = {
output: {
path: path.join(__dirname, './'),
publicPath: '/'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: true,
importLoaders: 1,
localIdentName: "[name]_[local]_[hash:base64]",
sourceMap: true,
minimize: true
}
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
new Dotenv()
],
devServer: {
historyApiFallback: true,
}
};
If you can share the error log, I may tell what is the real problem. But current config is missing for an entry point. If your application is a single page app, do it like the following code;
module.exports = {
entry: path.join(__dirname, "src", "index.js"),
...
}
if you are building multi page application do it like the following code;
module.exports = {
entry: {
pageOne: path.join(__dirname, "src", "pageOne", "index.js"),
pageTwo: path.join(__dirname, "src", "pageTwo", "index.js"),
pageThree: path.join(__dirname, "src", "pageThree", "index.js")
}
...
}