webpack.config.js

const path = require("path");
const webpack = require("webpack");
const merge = require("webpack-merge");

const CopyWebpackPlugin = require("copy-webpack-plugin");
const HTMLWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

// to extract the css as a separate file
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

let MODE, OUTPUT_JS_FILE_NAME, PUBLIC_PATH, ENTRY_TEMPLATE, ENTRY_JS;

switch (process.env.npm_lifecycle_event) {
    case 'itch':
        MODE = 'production';
        OUTPUT_JS_FILE_NAME = '[name]-[hash].js';
        PUBLIC_PATH = './';
        ENTRY_TEMPLATE = 'src/itch.ejs';
        ENTRY_JS = './src/itch.js';
        break;

    case 'prod':
        MODE = 'production';
        OUTPUT_JS_FILE_NAME = '[name]-[hash].js';
        PUBLIC_PATH = './';
        ENTRY_TEMPLATE = 'src/index.ejs';
        ENTRY_JS = './src/index.js';
        break;

    default:
        MODE = 'development';
        OUTPUT_JS_FILE_NAME = 'index.js';
        PUBLIC_PATH = '/';
        ENTRY_TEMPLATE = 'src/index.ejs';
        ENTRY_JS = './src/index.js';
        break;
}

var common = {
  mode: MODE,
  entry: ENTRY_JS,
  output: {
    path: path.join(__dirname, "dist"),
    publicPath: PUBLIC_PATH,
    // webpack -p automatically adds hash when building for production
    filename: OUTPUT_JS_FILE_NAME
  },
  plugins: [
    new HTMLWebpackPlugin({
      // Use this template to get basic responsive meta tags
      template: ENTRY_TEMPLATE,
      // inject details of output file at end of body
      inject: "body"
    })
  ],
  resolve: {
    modules: [path.join(__dirname, "src"), "node_modules"],
    extensions: [".js", ".elm", ".scss", ".png"]
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.scss$/,
        exclude: [/elm-stuff/, /node_modules/],
        // see https://github.com/webpack-contrib/css-loader#url
        loaders: ["style-loader", "css-loader?url=false", "sass-loader"]
      },
      {
        test: /\.css$/,
        exclude: [/elm-stuff/, /node_modules/],
        loaders: ["style-loader", "css-loader?url=false"]
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        exclude: [/elm-stuff/, /node_modules/],
        loader: "url-loader",
        options: {
          limit: 10000,
          mimetype: "application/font-woff"
        }
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        exclude: [/elm-stuff/, /node_modules/],
        loader: "file-loader"
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loader: "file-loader"
      }
    ]
  }
};

if (MODE === "development") {
  console.log("Building for dev...");
  module.exports = merge(common, {
    plugins: [
      // Suggested for hot-loading
      new webpack.NamedModulesPlugin(),
      // Prevents compilation errors causing the hot loader to lose state
      new webpack.NoEmitOnErrorsPlugin()
    ],
    module: {
      rules: [
        {
          test: /\.elm$/,
          exclude: [/elm-stuff/, /node_modules/],
          use: [
            { loader: "elm-hot-webpack-loader" },
            {
              loader: "elm-webpack-loader",
              options: {
                // add Elm's debug overlay to output
                debug: true,
                forceWatch: true
              }
            }
          ]
        }
      ]
    },
    devServer: {
      inline: true,
      stats: "errors-only",
      contentBase: path.join(__dirname, "src/static"),
      historyApiFallback: true,
      before(app) {
        // on port 3000
        app.get("/test", function(req, res) {
          res.json({ result: "OK" });
        });
      }
    }
  });
}

if (MODE === "production") {
  console.log("Building for Production...");
  module.exports = merge(common, {
    plugins: [
      // Delete everything from output directory and report to user
      new CleanWebpackPlugin(["dist"], {
        root: __dirname,
        exclude: [],
        verbose: true,
        dry: false
      }),
      // Copy static assets
      new CopyWebpackPlugin([
        {
          from: path.resolve(__dirname, 'src/static')
        }
      ]),
      new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: "[name]-[hash].css"
      })
    ],
    module: {
      rules: [
        {
          test: /\.elm$/,
          exclude: [/elm-stuff/, /node_modules/],
          use: {
            loader: "elm-webpack-loader",
            options: {
              optimize: true
            }
          }
        },
        {
          test: /\.css$/,
          exclude: [/elm-stuff/, /node_modules/],
          loaders: [
            MiniCssExtractPlugin.loader,
            "css-loader?url=false"
          ]
        },
        {
          test: /\.scss$/,
          exclude: [/elm-stuff/, /node_modules/],
          loaders: [
            MiniCssExtractPlugin.loader,
            "css-loader?url=false",
            "sass-loader"
          ]
        }
      ]
    }
  });
}