ncahec-northwest-theme/webpack.common.config.js

theme for northwest ahec

const theme = require("./package").name;
const themeVersion = require("./package").version;
const region = theme.replace(/(ncahec-|-theme)/gi, "");
const repo = require("git-repo-name").sync();
const branch = require("git-branch").sync(__dirname);

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin").CleanWebpackPlugin;
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const devMode = process.env.NODE_ENV !== "production";
const webpack = require("webpack");
const fs = require("fs");
const exec = require("child_process").exec;

// configuration to build the theme using webpack

// read files in the content directory for html-webpack-plugin
const pug_files = (function (folder) {
  const items = fs.readdirSync(folder);
  return items
    .filter((item) => {
      return item.indexOf(".pug") > 0;
    })
    .map((item) => {
      // console.log(item)
      return new HtmlWebpackPlugin({
        title: item.split(".")[0],
        template: path.join(folder, item),
        filename: item.split(".")[0] + ".html",
      });
    });
})("./src");

var proxies = {};
[
  "/api/",
  "/dist/js/menu-bar",
  "/frequently-asked-questions/dist/",
  "/courses/dist/",
  "/elite/dist/",
  "/cg3/build/",
  "/users/dist/",
  "/login/dist/",
  "/dashboard/dist/",
  "/sign-in/dist/",
  "/sign-out/dist/",
  "/rest",
  "/nw/",
  "/cg2",
  "/northwest-registration/dist/",
].map((item) => {
  proxies[item] = {
    target: "https://northwestahec.wakehealth.edu",
    changeOrigin: true,
  };
});
module.exports = {
  devServer: {
    // clientLogLevel:"debug",
    overlay: true,
    port: 3000,
    writeToDisk: true,
    proxy: {
      ...proxies,
      "/admin/evaluations/.+": {
        target: "https://northwestahec.wakehealth.edu",
        pathRewrite: {
          "^/admin/evaluations/(.+)": "/admin/evaluations/$1",
        },
      },
      "/admin/evaluations": {
        target: "http://localhost:3000",
        pathRewrite: {
          "^/admin/evaluations/$": "dist/index-evaluations.html",
        },
      },
      "/frequently-asked-questions": {
        target: "http://localhost:3000",
        pathRewrite: {
          "^/frequently-asked-questions$": "dist/index-login.html",
        },
      },
      "/cg3": {
        target: "http://localhost:3000",
        pathRewrite: {
          "^/cg3.*": "dist/index-cg3.html",
        },
      },
      "/elite": {
        target: "http://localhost:3000",
        pathRewrite: {
          "^/elite.*": "dist/index-elite.html",
        },
      },
      "/users/manage-profile": {
        target: "http://localhost:3000",
        pathRewrite: {
          "^/users/manage-profile.*": "dist/index-users.html",
        },
      },
      // "/users/manage-profile": {
      //   target: "http://localhost:3000",
      //   pathRewrite: {
      //     "^/users/manage-profile$": "dist/index-users.html",
      //   },
      // },
      "/northwest-registration/": {
        target: "http://localhost:3000",
        pathRewrite: {
          "^/northwest-registration(/?)$":
            "dist/index-northwest-registration.html",
        },
      },
      "/courses-and-events": {
        target: "http://localhost:3000",
        pathRewrite: {
          "^/courses-and-events.*": "dist/index-courses.html",
        },
      },
      "/dashboard": {
        target: "http://localhost:3000",
        pathRewrite: { "^/dashboard$": "dist/index-login.html" },
      },
      "/sign-in": {
        target: "http://localhost:3000",
        pathRewrite: { "^/sign-in$": "dist/index-login.html" },
      },
      "/sign-out": {
        target: "http://localhost:3000",
        pathRewrite: { "^/sign-out$": "dist/index-login.html" },
      },
    },
  },
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true, // set to true if you want JS source maps
      }),
      new OptimizeCSSAssetsPlugin({}),
    ],
  },
  entry: "./src/index.js",
  output: {
    filename: "dist/js/bundle.js",
    path: path.resolve(__dirname, "assets"),
  },
  module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // you can specify a publicPath here
              // by default it use publicPath in webpackOptions.output
              publicPath: "../",
            },
          },
          {
            loader: "css-loader", // translates CSS into CommonJS modules
          },
          {
            loader: "resolve-url-loader",
            options: {},
          },
          {
            loader: "sass-loader", // compiles Sass to CSS
            options: {
              sourceMap: true,
              courseMapContents: false,
            },
          },
        ],
      },
      {
        test: /\.pug$/,
        use: [
          "html-loader?attrs=img:src",
          {
            loader: "pug-html-loader",
            options: {
              data: { themeVersion: repo + "/" + branch + ":" + themeVersion },
            },
          },
        ],
      },
      {
        test: /\.(jpe?g|png|gif|svg|ico)$/i,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[ext]",
              outputPath: "dist/images/",
            },
          },
        ],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ["babel-loader"],
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin({
      cleanBeforeBuildPatterns: ["dist/*", "assets/*"],
    }),
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      publicPath: "/dist",
      filename: devMode ? "dist/css/[name].css" : "dist/css/[name].[hash].css",
      chunkFilename: devMode ? "dist/css/[id].css" : "dist/css/[id].[hash].css",
    }),
    {
      apply: (compiler) => {
        compiler.hooks.afterEmit.tap("AfterEmitPlugin", (compilation) => {
          exec("node .", (err, stdout, stderr) => {
            if (stdout) process.stdout.write(stdout);
            if (stderr) process.stderr.write(stderr);
          });
        });
      },
    },
    ...pug_files,
  ],
};