After build launchevent.js file name isn't correct in commands.html

[aamirhusnain]

Hi, I have created an Outlook add-in and I have added OnMessageSend event in it following this documentation link I have created new folder and file ./src/launchevent/launchevent.js and added this URL <script type="text/javascript" src="../launchevent/launchevent.js"></script> in my command.html file also updated my webpack but when I am running command npm run build now what happened after build launchevent.js file name in commands.html is not same as its name

[rajjha-msft]

Hey @aamirhusnain

The dist folder, short for "distribution," contains the final, optimized, and minified version of your application that is ready for deployment. This folder includes all the necessary files such as HTML, CSS, JavaScript, and other assets that your application needs to run in a production environment.

It should not impact with the working of your add-in.

If you still notice any issues with the renamed files, such as broken references or missing assets, you may need to adjust your build configuration or update your code to correctly reference the new file names.

[Rick-Kirkham]

@rajjha-msft I think the user is running in production mode which uses the files in the /dist folder. The command.html file in that folder should not be trying to load a file name that doesn't exist. This will generate a 404 error in production.

@aamirhusnain Please provide your webpack.config.js file. I think it can be configured to not rename the files at all.

[aamirhusnain]

Hi @Rick-Kirkham this is my webpack.config.js

const devCerts = require("office-addin-dev-certs");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");

const urlDev = "https://localhost:3000/";
const urlProd = "https://www.contoso.com/"; // CHANGE THIS TO YOUR PRODUCTION DEPLOYMENT LOCATION

async function getHttpsOptions() {
  const httpsOptions = await devCerts.getHttpsServerOptions();
  return { ca: httpsOptions.ca, key: httpsOptions.key, cert: httpsOptions.cert };
}

module.exports = async (env, options) => {
  const dev = options.mode === "development";
  const config = {
    devtool: "source-map",
    entry: {
      polyfill: ["core-js/stable", "regenerator-runtime/runtime"],
      vendor: ["react", "react-dom", "core-js", "@fluentui/react-components", "@fluentui/react-icons"],
      taskpane: ["./src/taskpane/index.tsx", "./src/taskpane/taskpane.html"],
      commands: "./src/commands/commands.ts",
    },
    output: {
      clean: true,
    },
    resolve: {
      extensions: [".ts", ".tsx", ".html", ".js"],
    },
    module: {
      rules: [
        {
          test: /\.ts$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-typescript"],
            },
          },
        },
        {
          test: /\.tsx?$/,
          exclude: /node_modules/,
          use: ["ts-loader"],
        },
        {
          test: /\.html$/,
          exclude: /node_modules/,
          use: "html-loader",
        },
        {
          test: /\.(png|jpg|jpeg|ttf|woff|woff2|gif|ico)$/,
          type: "asset/resource",
          generator: {
            filename: "assets/[name][ext][query]",
          },
        },
      ],
    },
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          {
            from: "assets/*",
            to: "assets/[name][ext][query]",
          },
          {
            from: "manifest*.xml",
            to: "[name]" + "[ext]",
            transform(content) {
              if (dev) {
                return content;
              } else {
                return content.toString().replace(new RegExp(urlDev, "g"), urlProd);
              }
            },
          },
        ],
      }),
      new HtmlWebpackPlugin({
        filename: "taskpane.html",
        template: "./src/taskpane/taskpane.html",
        chunks: ["polyfill", "vendor", "taskpane"],
      }),
      new HtmlWebpackPlugin({
        filename: "commands.html",
        template: "./src/commands/commands.html",
        chunks: ["commands"],
      }),
      new CopyWebpackPlugin({
        patterns: [
          {
            from: "./src/launchevent/launchevent.js",
            to: "launchevent.js",
          },
        ],
      }),
      new webpack.ProvidePlugin({
        Promise: ["es6-promise", "Promise"],
      }),
    ],
    devServer: {
      hot: true,
      headers: {
        "Access-Control-Allow-Origin": "*",
      },
      server: {
        type: "https",
        options: env.WEBPACK_BUILD || options.https !== undefined ? options.https : await getHttpsOptions(),
      },
      port: process.env.npm_package_config_dev_server_port || 3000,
    },
  };

  return config;
};

[rajjha-msft]

Hey @aamirhusnain

Our support is limited to issues with Office-Js Apis and add-in platform. Will request you to raise the issue with the concerned services/products.