title: Yeoman - Yo Office - Disable Filename Hashing - Webpack
body: <p>I don't like how webpack transforms my added files to have hashed names. It doesn't seem to line up sometimes, but that's beyond the point as I don't like it period and it messes with source control. I'm not to used to webpack, but I'm certain there is a configuration somewhere in here that is choosing to use the hashed filenames. <strong>How can I make it reference the file by original file name?</strong></p>
  <p>Eg:</p>
  <p>This --&gt; <code>&lt;script type=&quot;text/javascript&quot; src=&quot;../functions/functions.js&quot;&gt;&lt;/script&gt;</code> in my <code>taskpane.html</code> gets transformed to <code>31d6cfe0d16ae931b73c</code> as both a file name and in the output <code>taskpane.html</code>. I'd like it to all stay/reference <code>functions.js</code>.</p>
  <p>Here is the default <code>webpack.config.js</code> from a yeoman office taskpane for excel w/ TS setup today:</p>
  <pre><code>/* eslint-disable no-undef */
  
  const devCerts = require(&quot;office-addin-dev-certs&quot;);
  const CopyWebpackPlugin = require(&quot;copy-webpack-plugin&quot;);
  const HtmlWebpackPlugin = require(&quot;html-webpack-plugin&quot;);
  
  const urlDev = &quot;https://localhost:3000/&quot;;
  const urlProd = &quot;https://www.contoso.com/&quot;; // CHANGE THIS TO YOUR PRODUCTION DEPLOYMENT LOCATION
  
  async function getHttpsOptions() {
    const httpsOptions = await devCerts.getHttpsServerOptions();
    return { cacert: httpsOptions.ca, key: httpsOptions.key, cert: httpsOptions.cert };
  }
  
  module.exports = async (env, options) =&gt; {
    const dev = options.mode === &quot;development&quot;;
    const buildType = dev ? &quot;dev&quot; : &quot;prod&quot;;
    const config = {
      devtool: &quot;source-map&quot;,
      entry: {
        polyfill: [&quot;core-js/stable&quot;, &quot;regenerator-runtime/runtime&quot;],
        taskpane: &quot;./src/taskpane/taskpane.ts&quot;,
        commands: &quot;./src/commands/commands.ts&quot;,
      },
      output: {
        devtoolModuleFilenameTemplate: &quot;webpack:///[resource-path]?[loaders]&quot;,
        clean: true,
      },
      resolve: {
        extensions: [&quot;.ts&quot;, &quot;.tsx&quot;, &quot;.html&quot;, &quot;.js&quot;],
      },
      module: {
        rules: [
          {
            test: /\.ts$/,
            exclude: /node_modules/,
            use: {
              loader: &quot;babel-loader&quot;,
              options: {
                presets: [&quot;@babel/preset-typescript&quot;],
              },
            },
          },
          {
            test: /\.tsx?$/,
            exclude: /node_modules/,
            use: &quot;ts-loader&quot;,
          },
          {
            test: /\.html$/,
            exclude: /node_modules/,
            use: &quot;html-loader&quot;,
          },
          {
            test: /\.(png|jpg|jpeg|gif|ico)$/,
            type: &quot;asset/resource&quot;,
            generator: {
              filename: &quot;assets/[name][ext][query]&quot;,
            },
          },
        ],
      },
      plugins: [
        new HtmlWebpackPlugin({
          filename: &quot;taskpane.html&quot;,
          template: &quot;./src/taskpane/taskpane.html&quot;,
          chunks: [&quot;polyfill&quot;, &quot;taskpane&quot;],
        }),
        new CopyWebpackPlugin({
          patterns: [
            {
              from: &quot;assets/icon-*&quot;,
              to: &quot;assets/[name][ext][query]&quot;,
            },
            {
              from: &quot;manifest*.xml&quot;,
              to: &quot;[name].&quot; + buildType + &quot;[ext]&quot;,
              transform(content) {
                if (dev) {
                  return content;
                } else {
                  return content.toString().replace(new RegExp(urlDev, &quot;g&quot;), urlProd);
                }
              },
            },
          ],
        }),
        new HtmlWebpackPlugin({
          filename: &quot;commands.html&quot;,
          template: &quot;./src/commands/commands.html&quot;,
          chunks: [&quot;polyfill&quot;, &quot;commands&quot;],
        }),
      ],
      devServer: {
        headers: {
          &quot;Access-Control-Allow-Origin&quot;: &quot;*&quot;,
        },
        https: env.WEBPACK_BUILD || options.https !== undefined ? options.https : await getHttpsOptions(),
        port: process.env.npm_package_config_dev_server_port || 3000,
      },
    };
  
    return config;
  };
  </code></pre>