hmr

package.json

@@ -5,6 +5,7 @@
   "private": true,
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+		"start": "webpack serve",
     "build": "webpack"
   },
   "author": "",
@@ -24,6 +25,7 @@
     "postcss-simple-vars": "^6.0.2",
     "style-loader": "^2.0.0",
     "webpack": "^5.11.1",
-    "webpack-cli": "^4.3.1"
+    "webpack-cli": "^4.3.1",
+    "webpack-dev-server": "^3.11.1"
   }
 }

src/js/index.js

@@ -1,7 +1,7 @@
-import './style.css';
-import './style.inline.css';
+import '../css/style.css';
+import '../css/style.inline.css';
 
-import MyImage from './my-image.png';
+import MyImage from '../img/my-image.png';
 
 function component() {
   const element = document.createElement('div');

webpack.config.js

@@ -4,16 +4,22 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
 module.exports = {
-	entry: './src/index.js',
+	mode: 'development',
+	entry: './src/js/index.js',
 	output: {
 		filename: '[name].bundle.js',
 		path: path.resolve(__dirname, 'dist'),
 	},
+	devtool: 'inline-source-map',
+	devServer: {
+		contentBase: './dist',
+		hot: true,
+	},
 	plugins: [
 		new MiniCssExtractPlugin(),
 		new CleanWebpackPlugin(),
 		new HtmlWebpackPlugin({
-			template: 'src/index.html'
+			template: 'src/html/index.html'
 		}),
 	],
 	module: {