Merge remote-tracking branch 'origin/dev' into dev

Author: hvianna

package.json

@@ -7,7 +7,8 @@
   "description": "Media player and real-time audio spectrum analyzer",
   "scripts": {
     "build": "webpack",
-    "start": "http-server"
+    "start": "http-server",
+    "dev": "webpack serve --config webpack.dev.js"
   },
   "devDependencies": {
     "audiomotion-analyzer": "^4.5.1",
@@ -21,7 +22,9 @@
     "notie": "^4.3.1",
     "process": "^0.11.10",
     "sortablejs": "^1.15.2",
+    "style-loader": "^4.0.0",
     "webpack": "^5.91.0",
-    "webpack-cli": "^5.1.4"
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.2.2"
   }
 }

webpack.dev.js

@@ -0,0 +1,43 @@
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+	mode: 'development',
+	entry: './src/index.js',
+	devtool: 'inline-source-map',
+	devServer: {
+		static: {
+			directory: path.join(__dirname, 'public'),
+		},
+		compress: true,
+		port: 9000,
+		hot: true,
+		open: true,
+	},
+	module: {
+		rules: [
+			{
+				test: /\.css$/,
+				use: [
+					'style-loader', // Use style-loader instead of MiniCssExtractPlugin in dev
+					{
+						loader: 'css-loader',
+						options: { url: false },
+					},
+				],
+			},
+		],
+	},
+	plugins: [
+		new webpack.HotModuleReplacementPlugin(),
+		new webpack.ProvidePlugin({
+			Buffer: ['buffer', 'Buffer'],
+			process: 'process/browser.js',
+		}),
+	],
+	output: {
+		filename: 'audioMotion.js',
+		path: path.resolve(__dirname, 'public'),
+		clean: true,
+	},
+};