ESP3D/embedded/config/webpack.dev.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    mode: "development", // this will trigger some webpack default stuffs for dev
    entry: path.resolve(__dirname, "../src/index.js"), // if not set, default path to './src/index.js'. Accepts an object with multiple key-value pairs, with key as your custom bundle filename(substituting the [name]), and value as the corresponding file path
    output: {
        filename: "[name].bundle.js", // [name] will take whatever the input filename is. defaults to 'main' if only a single entry value
        path: path.resolve(__dirname, "../dist"), // the folder containing you final dist/build files. Default to './dist'
    },
    devServer: {
        historyApiFallback: true, // to make our SPA works after a full reload, so that it serves 'index.html' when 404 response
        open: true,
        static: {
            directory: path.resolve(__dirname, "./dist"),
        },
        port: 8088,
        proxy: {
            context: () => true,
            target: "http://localhost:8080",
        },
    },
    stats: "minimal", // default behaviour spit out way too much info. adjust to your need.
    devtool: "source-map", // a sourcemap type. map to original source with line number
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "../src/index.html"),
            inlineSource: ".(js|css)$",
            inject: true,
        }),
    ], // automatically creates a 'index.html' for us with our <link>, <style>, <script> tags inserted! Visit https://github.com/jantimon/html-webpack-plugin for more options
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env"],
                    },
                },
            },
            {
                test: /\.css$/, // run the loaders below only on .css files
                // this are the loaders. they interpret files, in this case css. they run from right to left sequence.
                // css-loader: "interprets @import and url() like import/require() and will resolve them."
                // style-loader: "Adds CSS to the DOM by injecting a <style> tag". this is fine for development.
                use: ["style-loader", "css-loader"],
            },
        ],
    },
};