Can someone guide me on adding a hash to my js file name for cache-busting purposes? I've researched online but still uncertain about where to include the [hash] element. Any help would be appreciated.
Provided below is a snippet from my webpack.config file:
const devCerts = require("office-addin-dev-certs");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const fs = require("fs");
const webpack = require("webpack");
module.exports = async (env, options) => {
const dev = options.mode === "development";
const config = {
devtool: "source-map",
entry: {
polyfill: "@babel/polyfill",
jquery: "jquery/src/jquery",
taskpane: "./src/taskpane.ts",
sentry: "@sentry/browser"
},
resolve: {
extensions: [".ts", ".tsx", ".html", ".js"]
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
use: "babel-loader"
},
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: "ts-loader"
},
{
test: /\.html$/,
exclude: /node_modules/,
use: "html-loader"
},
{
test: /\.(png|jpg|jpeg|gif)$/,
use: "file-loader"
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
filename: "taskpane.html",
template: "./src/taskpane.html",
chunks: ["polyfill", "jquery", "taskpane", "sentry"]
}),
new CopyWebpackPlugin([
{
to: "taskpane.css",
from: "./src/taskpane.css"
}
]),
new CopyWebpackPlugin([
{
to: "assets",
from: "./assets"
}
]),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
devServer: {
headers: {
"Access-Control-Allow-Origin": "*"
},
https: (options.https !== undefined) ? options.https : await devCerts.getHttpsServerOptions(),
port: process.env.npm_package_config_dev_server_port || 3000
}
};
return config;
};