package.json

{
  "name": "gba-broker-ui-ng",
  "version": "0.1.0",
  "description": "",
  "private": true,
  "dependencies": {
    "@material/button": "^0.40.0",
    "@material/card": "^0.40.0",
    "@material/checkbox": "^0.40.0",
    "@material/dialog": "^0.40.0",
    "@material/fab": "^0.40.0",
    "@material/form-field": "^0.40.0",
    "@material/layout-grid": "^0.39.0",
    "@material/linear-progress": "^0.40.0",
    "@material/list": "^0.40.0",
    "@material/radio": "^0.40.0",
    "@material/select": "^0.40.0",
    "@material/textfield": "^0.40.0",
    "@material/theme": "^0.40.0",
    "@material/top-app-bar": "^0.40.0",
    "elm": "^0.19.0",
    "elm-test": "^0.19.0-beta9",
    "webpack": "^4.20.2",
    "elm-webpack-loader": "^5.0.0",
    "webpack-cli": "^3.1.1",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.9.3",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.0",
    "css-loader": "^1.0.0"
  },
  "scripts": {
    "test": "elm-test",
    "build": "webpack --mode production",
    "dev": "webpack-dev-server --hotOnly --mode development --port 3000"
  },
  "devDependencies": {
    "elm-hot-webpack-loader": "^1.0.2",
    "webpack-dev-server": "^3.1.9"
  }
}

web pack.config.js

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

const html = new HTMLWebpackPlugin({
    template: 'src/index.html',
    inject: 'body'
});

const sassRule = {
    test: /\.(scss)$/,
    exclude: [/elm-stuff/, /node_modules/],
    use: [
        {
            loader: 'style-loader' // inject CSS to page
        }, {
            loader: 'css-loader' // translates CSS into CommonJS modules
        }, {
            loader: 'sass-loader',
            options: {
                includePaths: ['./node_modules']
            }
        }
    ]
};

const devOutput = {
    path: path.join(__dirname, "dist"),
    publicPath: '/',
    filename: '[name].js',
};

const prodOutput = {
    path: path.join(__dirname, "dist"),
    publicPath: '/',
    filename: '[name]-[hash].js',
};

const elmDevRule = {
    test: /\.elm$/,
    exclude: [/elm-stuff/, /node_modules/],
    use: [{
        loader: 'elm-hot-webpack-loader'
    }, {
        loader: 'elm-webpack-loader',
        options: {
            debug: false
        }
    }]
};

const elmProdRule = {
    test: /\.elm$/,
    exclude: [/elm-stuff/, /node_modules/],
    use: [{
        loader: 'elm-webpack-loader',
        options: {
            debug: false,
            optimize: true
        }
    }]
};

const devServer = {
    inline: true,
    hot: true,
    stats: {colors: true},
    historyApiFallback: true,
    proxy: {
        "/api": {
            target: "http://localhost:8080",
            pathRewrite: {"^/api": ""}
        }
    }
};

module.exports = (env, argv) => {
    if (argv.mode === 'development') {
        return {
            plugins: [
                new webpack.HotModuleReplacementPlugin(),
                html
            ],

            output: devOutput,

            module: {
                rules: [
                    sassRule,
                    elmDevRule
                ]
            },

            devServer: devServer
        }
    }

    if (argv.mode === 'production') {
        return {
            plugins: [
                html
            ],

            output: prodOutput,

            module: {
                rules: [
                    sassRule,
                    elmProdRule
                ]
            }
        }
    }
};