I'm encountering an issue with a simple webpack configuration:
var path = require("path");
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
module: {
rules: [
{
test:/\.css$/,
use:['style-loader','css-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
hash: true,
filename: 'index.html',
title: 'My Awesome application',
myPageHeader: 'Hello World',
template: './src/index.html',
})
],
devServer: {
port: 8000,
hot: true
},
};
Interestingly, when I set "hot : false" it works perfectly fine and my CSS is loaded. However, if I switch to "hot: true", although I can see the HTML content, the styling is not applied.
"webpack": "^4.16.0",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"
In addition, if I build using webpack and then manually open dist/index.html in my browser, everything works as expected.
In my index.js file, I import my CSS like this:
import './styles/app.css';
~