webpack.config.js

const path = require("path");

// webpack
const webpack = require("webpack");
const { PowerBICustomVisualsWebpackPlugin, LocalizationLoader } = require("powerbi-visuals-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const ExtraWatchWebpackPlugin = require("extra-watch-webpack-plugin");

// api configuration
const powerbiApi = require("powerbi-visuals-api");

// visual configuration json path
const pbivizPath = "./pbiviz.json";
const pbivizFile = require(path.join(__dirname, pbivizPath));

// the visual capabilities content
const capabilitiesPath = "./capabilities.json";
const capabilities = require(path.join(__dirname, capabilitiesPath));

const pluginLocation = "./.tmp/precompile/visualPlugin.ts"; // Path to visual plugin file, the file generated by the webpack-plugin
const visualSourceLocation = "../../src/visual"; // This path is used inside of the generated plugin, so it depends on pluginLocation
const statsLocation = "../../webpack.statistics.html";

const isProduction = true;
module.exports = {
  entry: {
    "visual.js": pluginLocation,
  },
  target: "web",
  devtool: "eval-source-map",
  mode: isProduction ? "production" : "development",
  optimization: {
    minimize: isProduction, // enable minimization for create *.pbiviz file less than 2 Mb, can be disabled for dev mode
  },
  performance: {
    maxEntrypointSize: 1024000,
    maxAssetSize: 1024000,
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        include: /powerbi-visuals-|src|precompile(\\|\/)visualPlugin.ts/,
        use: [
          {
            loader: "ts-loader",
            options: {
              transpileOnly: false,
              experimentalWatchApi: false,
            },
          },
        ],
      },
      {
        test: /\.json$/,
        loader: "json-loader",
        type: "javascript/auto",
      },
      {
        test: /(\.less)|(\.css)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: "css-loader",
          },
          {
            loader: "less-loader",
            options: {
              lessOptions: {
                paths: [path.resolve(__dirname, "node_modules")],
              },
            },
          },
        ],
      },
      {
        test: /\.(woff|ttf|ico|woff2|jpg|jpeg|png|webp|gif|svg|eot)$/i,
        type: "asset/inline",
      },
      {
        test: /powerbiGlobalizeLocales\.js$/,
        loader: LocalizationLoader,
      },
    ],
  },
  externals: { "powerbi-visuals-api": "null" },
  resolve: {
    extensions: [".tsx", ".ts", ".jsx", ".js", ".css"],
    alias: {
      src: path.resolve(__dirname, "src/"),
      assets: path.resolve(__dirname, "assets/"),
    },
    fallback: {
      fakeDefine: false, // Add this line to provide a fallback
    },
  },
  output: {
    clean: true,
    path: path.join(__dirname, ".tmp", "drop"),
    publicPath: "/assets",
    filename: "[name]",
    library: pbivizFile.visual.guid,
    libraryTarget: "var",
  },
  devServer: {
    static: {
      directory: path.join(__dirname, ".tmp", "drop"), // path with assets generated by webpack plugin
      publicPath: "/assets/",
    },
    compress: true, // enable gzip compression
    port: 8080, // dev server port
    hot: false,
    server: {
      // cert files for dev server
      type: "https",
      options: {
        // keep it commented to use webpack generated certificate
        // key: path.join(__dirname, "certs","PowerBICustomVisualTest_public.key"), // for darwin, linux
        // cert: path.join(__dirname, "certs", "PowerBICustomVisualTest_public.cer"), // for darwin, linux
        // pfx: fs.readFileSync(path.join(__dirname, "certs", "PowerBICustomVisualTest_public.pfx")), // for windows
        // passphrase: "5031595470751755"
        // requestCert: true,
      },
    },
    headers: {
      "access-control-allow-origin": "*",
      "cache-control": "public, max-age=0",
    },
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "visual.css",
      chunkFilename: "[id].css",
    }),
    new BundleAnalyzerPlugin({
      // adds the ability to analyze the size of the bundle
      reportFilename: statsLocation,
      openAnalyzer: false,
      analyzerMode: `static`,
    }),
    new PowerBICustomVisualsWebpackPlugin({
      // custom visuals plugin instance with options
      ...pbivizFile,
      capabilities,
      visualSourceLocation,
      pluginLocation,
      apiVersion: powerbiApi.version,
      capabilitiesSchema: powerbiApi.schemas.capabilities,
      dependenciesSchema: powerbiApi.schemas.dependencies,
      devMode: false,
      generatePbiviz: true,
      generateResources: isProduction,
      modules: true,
      packageOutPath: path.join(__dirname, "dist"),
    }),
    new ExtraWatchWebpackPlugin({
      files: [pbivizPath, capabilitiesPath],
    }),
    new webpack.WatchIgnorePlugin({
      // visual plugin regenerates with the visual source, but it does not require relaunching dev server
      paths: [path.join(__dirname, pluginLocation), "./.tmp/**/*.*", "./.tmp/**/**/*.*"],
    }),
    new webpack.ProvidePlugin({
      define: "fakeDefine",
    }),
  ],
};