canape/frontend/webpack.config.js

var webpack = require("webpack");
var path = require("path");
var WebpackPwaManifest = require("webpack-pwa-manifest")
var HtmlWebpackPlugin = require("html-webpack-plugin");
var { CleanWebpackPlugin } = require("clean-webpack-plugin");

var mode = "development";
var BUILD_DIR = path.resolve(__dirname, "../build/public/");

if (process.env.NODE_ENV === "production") {
  mode = "production";
  BUILD_DIR = path.resolve(__dirname, "../canapeapp/public/");
}

var SRC_DIR = path.resolve(__dirname);

const config = {
  mode: mode,
  entry: path.join(SRC_DIR, "js/app.js"),
  output: {
    path: BUILD_DIR,
    filename: "[contenthash]-app.js",
  },
  optimization: {
    runtimeChunk: "single",
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          chunks: "all",
        },
      },
    },
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"]
          }
        }
      },
      {
        test: /\.scss$/,
        use: [
          "style-loader",
          "css-loader",
          "sass-loader",
          "postcss-loader",
        ],
      },
      {
        test: /\.(png|jpg|svg|ico)$/,
        use: ["file-loader?name=[hash]-[name].[ext]"],
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: ["url-loader?limit=10000&mimetype=application/font-woff"],
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: ["file-loader"],
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
    }),
    new webpack.HashedModuleIdsPlugin(),
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: ["**/*", "!img/**/*", "!img"],
    }),
    new HtmlWebpackPlugin({
      template: path.join(SRC_DIR, "index.html"),
    }),
    new WebpackPwaManifest({
      fingerprints: true,
      inject: true,
      ios: {
        "apple-mobile-web-app-status-bar-style": "default",
        "apple-mobile-web-app-title": "Canapé",
      },
      name: "Canapé",
      short_name: "Canapé",
      background_color: "#4e5d6c",
      theme_color: "#4e5d6c",
      display: "standalone",
      orientation: "omit",
      scope: "/",
      start_url: "/",
      icons: [
        {
          src: path.resolve(__dirname, "img/android-chrome-512x512.png"),
          sizes: [96, 128, 192, 256, 384, 512],
        },
        {
          src: path.resolve(__dirname, "img/apple-touch-icon.png"),
          sizes: [80, 120, 152, 167, 180],
          ios: true
        },
      ],
    }),
  ],
  resolve: {
    extensions: [".js"],
  },
};

if (process.env.NODE_ENV !== "production") {
  config.devtool = "#cheap-module-source-map"
}

module.exports = config;