Webpack use

config/webpack.dev.js

@@ -0,0 +1,51 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable prefer-template */
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+const { merge } = require('webpack-merge');
+const paths = require('./paths');
+const common = require('./webpack.common');
+
+module.exports = merge(common, {
+  // Set the mode to development or production
+  mode: 'development',
+
+  // Control how source maps are generated
+  devtool: 'inline-source-map',
+
+  // Spin up a server for quick development
+  devServer: {
+    historyApiFallback: true,
+    contentBase: paths.build,
+    open: false,
+    compress: true,
+    hot: true,
+    port: 3000,
+  },
+
+  module: {
+    rules: [
+      // ... other rules
+      {
+        test: /\.[js]sx?$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: require.resolve('babel-loader'),
+            options: {
+              // ... other options
+              plugins: [
+                // ... other plugins
+                require.resolve('react-refresh/babel'),
+              ].filter(Boolean),
+            },
+          },
+          'eslint-loader',
+        ],
+      },
+    ],
+  },
+  plugins: [
+    // new webpack.HotModuleReplacementPlugin(),
+    new ReactRefreshWebpackPlugin(),
+  ].filter(Boolean),
+});