webpack.config.js

const env = require("dotenv").config().parsed;
const path = require("path");
const webpack = require("webpack");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const HtmlWebPackPlugin = require("html-webpack-plugin");

const envKeys = Object.keys(env).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(env[next]);
    return prev;
}, {});

module.exports = {
    entry: "./src/main.js",
    output: {
        path: path.join(__dirname, "dist"),
        filename: "bundle.js",
        publicPath: "/",
    },
    devServer: {
        port: process.env.NODE_PORT,
        historyApiFallback: true, // Reloads the app on last visited route (important)
        open: true,
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: "babel-loader",
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader",
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: "file-loader",
                options: {
                    outputPath: "assets/images/",
                },
            },
            {
                test: /\.(eot|woff|ttf|otf)$/,
                loader: "file-loader",
                options: {
                    outputPath: "assets/fonts/",
                },
            },
        ],
    },
    plugins: [
        new CleanWebpackPlugin(["dist"]),
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            favicon: "./src/assets/images/icon.png",
        }),
        new webpack.DefinePlugin(envKeys),
    ],
};