azpipelines-kubernetesUI/webapp.webpack.config.js

const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
const CircularDependencyPlugin = require("circular-dependency-plugin");

module.exports = {
  entry: {
    "azdevops-kube-summary": "./src/index.ts",
    "azdevops-kube-summary.min": "./src/index.ts"
  },
  output: {
    path: path.resolve(__dirname, "_bin/webAppPackage/_bundles"),
    filename: "[name].js",
    libraryTarget: "umd",
    library: "webapp-kube-summary",
    umdNamedDefine: true
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"]
  },
  devtool: "source-map",
  optimization: {
    minimizer: [
      new TerserPlugin({
        sourceMap: true,
        include: /\.min\.js$/,
        parallel: 4
      })
    ]
  },
  plugins: [
    new CircularDependencyPlugin({
      onStart({ compilation }) {
        // `onStart` is called before the cycle detection starts
        console.log("Detecting webpack modules cycles -- start.");
      },
      onDetected({ module: webpackModuleRecord, paths, compilation }) {
        // `paths` will be an Array of the relative module paths that make up the cycle
        // `module` will be the module record generated by webpack that caused the cycle
        const cyclePaths = paths.join(' -> ');
        compilation.errors.push(new Error(cyclePaths))
        console.error("Cycle detected: " + cyclePaths);
      },
      // `onEnd` is called before the cycle detection ends
      onEnd({ compilation }) {
        console.log("Done detecting webpack modules cycles.");
      },
      failOnError: true,
      cwd: process.cwd()
    })
  ],
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "ts-loader"
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "./buildScripts/css-variables-loader", "sass-loader"]
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.woff$/,
        use: [{
          loader: "base64-inline-loader"
        }]
      },
      {
        test: /\.html$/,
        loader: "file-loader"
      },
      { test: /\.(png|jpg|svg)$/, loader: "file-loader" },
    ]
  },
  node: {
    fs: "empty",
    tls: "mock",
    child_process: "empty",
    net: "empty"
  },
  externals: {
    "react": "react",
    "react-dom": "react-dom"
  }
}