I have module like courses .

set the publicPath: “/courses/” but in my use case public path should be
courses/{courseid} ,course id is dynamic value.

I want access my site as follows
http://local.pearson.com:8080/courses/1406882/

this is my web pack config

this config file will not work because it does not support for dynamic course id in public path property ( publicPath: ‘/courses/’)

what would be the solution for this

module.exports = () => [
  {
  // return {
    mode: 'production',
    entry: path.resolve(__dirname, 'src', 'index.js'),
    output: {
      path: __dirname + '/dist/',
      publicPath: '/courses/',
      filename: `bundle.v${version}.js`
    },
    module: {
      rules: [
        {
          test: /.(woff|woff2|ttf|eot)$/,
          use: 'file-loader?name=fonts/[name].[ext]!static',
        },
        {
          test: /.(js|jsx)$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              '@babel/preset-react',
            ],
            plugins: ['@babel/plugin-syntax-dynamic-import', '@babel/plugin-proposal-class-properties'],
          },
        },
        {
          test: /.(scss|css)$/,
          use: [
            'style-loader',
            'css-loader',
            'sass-loader',
          ],
        },
        {
          test: /.(png|jpe?g|gif)$/i,
          use: [
            {
              loader: 'file-loader',
            },
          ],
        },
        {
          test: /external.config.js$/,
          loader: 'file-loader',
          options: {
            name: `[name].[ext]`,
          },
        },
      ],
    },
    externals: {
      Config: 'window.openVellumConfigs',
      react: 'React',
      'react-dom': 'ReactDOM'
    },
    resolve: {
      extensions: ['.js', '.jsx', '.css', '.less', '.json'],
      modules: ['node_modules', 'path/to/your/static_resource'],
    },
    plugins: [new HtmlWebpackPlugin({ configURL: externalConfigPath, template: path.resolve(__dirname, 'src', 'index.html'), favicon: './favicon.ico' })],
  
  //};
}

i tried hard coding course ids like this

its works ,but i want to support for this for dynamic course ids

output: {
      path: __dirname + '/dist/',
      publicPath: '/courses/1406882/',
      filename: `bundle.v${version}.js`
    },