webpack_dev.config.js

const path = require('path')
const webpack = require('webpack')
const Dotenv = require('dotenv-webpack')
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  mode: 'development',
  context: __dirname,
  //devtool: 'inline-source-map',
  devtool: 'source-map',
  entry: [
    './src/index.js',
  ],
  output: {
    path: path.resolve(__dirname,  'dev'),
    filename: 'bundle.js',
  },
  devServer: {
    compress: true,
    historyApiFallback: true,
    port: 3030
  },
  plugins: [
    new HtmlWebPackPlugin({
      inject: true,
      template: path.resolve(__dirname, './index.html'),
      bundleFileName:"bundle.js"
    }),
    new Dotenv({path: path.resolve(__dirname, '.env'), systemvars: true}),
    new webpack.LoaderOptionsPlugin({
      debug: true
    })
  ],
  resolve: {
    alias: {
      //"@terminusdb/terminusdb-client": path.resolve('../terminusdb-client/index.js'),
      //"@rjsf/core": path.resolve('../react-jsonschema-form/packages/core/src/index.js'),
      "@terminusdb/terminusdb-documents-ui": path.resolve('../terminusdb-documents-ui/src/index.js'),
      //"@terminusdb-live/terminusdb-react-table": path.resolve('../terminusdb-react-table/src/index.js'),
      react: path.resolve('./node_modules/react')
    },
    fallback: { "https": false },
    extensions: ['.js', '.jsx', '.json'],
  },
  module: {
     rules : [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader:"babel-loader",
          options:{
            sourceType: "unambiguous",
            presets: [
              ["@babel/preset-env"],
              "@babel/preset-react"
            ],
            plugins: [[
              "@babel/plugin-proposal-class-properties",
              {
                "loose": true
              }
            ],"@babel/plugin-transform-react-jsx",
              "@babel/plugin-proposal-export-default-from","@babel/plugin-transform-regenerator",
            ["@babel/plugin-transform-runtime"]
            ]
          }
        },
      },
      {
        test: /\.(css|less)$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'less-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },
      {
        test: /\.(svg|jpg|gif|png)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              //outputPath: "images",
              //publicPath: "images"
            }
          }
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: (url, resourcePath, context) => {
                //if(argv.mode === 'development') {
                  const relativePath = path.relative(context, resourcePath);
                  return `/${relativePath}`;
                //}
                //return `/assets/fonts/${path.basename(resourcePath)}`;
              }
            }
          }
        ]
      }
     ]
  }
}