I am using Webpack to compile a React component into a UMD bundle to be used in one of my Splunk dashboards. The JavaScript file that is used on the Splunk dashboard is using RequireJS, and in order to use my React component, I need to specify the bundle.js in the config path within that file.
Currently I have only two options, either manually update the RequireJS config path on the Splunk side with the new bundle.[contenthash].js name, or just name it as bundle.js without hashing and clear the cache on my browser, each time I run the build. Is there a way for me to use Webpack or any other means to inject this hashed bundle name into the RequireJS config path so I can eliminate this need to clear cache / update the file naming manually each time I run my build? I've thought about creating a Python script to handle this injection, but I would like to first see if there's a simpler approach to doing this, preferably with my existing setup.
My configuration is here, in this case, dashboard-container is my bundled React component. I would like to replace the bundle name in the path and have Webpack inject bundle.[contenthash] over there instead.
Splunk Dashboard JS File:
require.config({
paths: {
react:
'/static/app/<splunk_app_name>/<folder_name>/node_modules/react/umd/react.production.min',
'react-dom':
'/static/app/<splunk_app_name>/<folder_name>/node_modules/react-dom/umd/react-dom.production.min',
'dashboard-container': '/static/app/<splunk_app_name>/<folder_name>/dist/bundle'
}
});
require([
'underscore',
'backbone',
'splunkjs/mvc',
'jquery',
'react',
'react-dom',
'dashboard-container'
], function(_, Backbone, mvc, $, React, ReactDOM, DashboardContainer) {
const serviceList = [
{name: 'Service 1', status: 'Good'},
{name: 'Service 2', status: 'Good'},
{name: 'Service 3', status: 'Error'},
{name: 'Service 4', status: 'Good'}
];
ReactDOM.render(
React.createElement(DashboardContainer.default, {serviceList: serviceList}, null),
document.getElementById('app')
);
});
Webpack Config:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/components/container/DashboardContainer.jsx',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.[contenthash].js',
library: 'DashboardContainer',
libraryTarget: 'umd'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader'
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: './index.html'
})
],
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'dist')
}
};