change folders structure

chinook/app/front/webpack/webpack-dev-server.js

@@ -0,0 +1,68 @@
+const path = require('path');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+
+module.exports = {
+  entry: {
+    app: './src/index.jsx',
+  },
+  devtool: 'inline-source-map',
+  devServer: {
+    contentBase: './dist',
+    hot: true,
+    port: 3000,
+    compress: true, // compress files to gzip to increase download speed
+    disableHostCheck: false, // by default true, it is not recomended,
+    // because it makes app vulnerable to DNS rebinding attacks
+    open: true, // open the browser after server had been started
+    historyApiFallback: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /(node_modules)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env', '@babel/preset-react'],
+            plugins: ['react-refresh/babel'].filter(Boolean),
+          },
+        },
+      },
+      {
+        test: /\.(png|jpg)$/,
+        use: [{ loader: 'url-loader' }],
+      },
+      {
+        test: /\.css$/,
+        use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
+      },
+    ],
+  },
+
+  plugins: [
+    new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
+    new HtmlWebpackPlugin({
+      template: path.join(__dirname, '../public/index.html'),
+    }),
+    new InterpolateHtmlPlugin(HtmlWebpackPlugin, {
+      PUBLIC_URL: '',
+    }),
+
+    new webpack.DefinePlugin({
+      'process.env.SERVICE_URL': JSON.stringify('http://localhost:4004/'),
+    }),
+    new webpack.ProgressPlugin(),
+    new webpack.HotModuleReplacementPlugin(), // for hot module replacement option of devServer
+    new ReactRefreshWebpackPlugin(),
+  ].filter(Boolean),
+  output: {
+    filename: '[name].bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+  resolve: { extensions: ['*', '.js', '.jsx'] },
+};