Webpack build - class module is not defined

Question

I am trying to build export a class and bundle it using Webpack .

After building the class, I configured the webpack with all possible options to be configured in outputs option, but it still gives [name of module] not defined or it is not a constructor.

I tried two approaches

Approach 1

My classA.js file

export class classA {

  constructor(target, options) {

    }
}

My webpack.config.js file

module.exports = merge(commonConfig, {
  entry: {
    index: path.resolve(__dirname, 'src/js/classA.js')
  },
  mode: 'production',
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css'
    })
  ],
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        parallel: true
      })
    ]
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'classA.bundle.js',
    library: 'classA',
    libraryTarget: 'umd'
  }
});

When I run the code without importing the classA.js in the index.js file, I get an error:

Webpack build ReferenceError - classA module is not defined

Approach 2

My classA.js file

export default class classA {

  constructor(target, options) {

    }
}

My webpack.config.js file

module.exports = merge(commonConfig, {
  entry: {
    index: path.resolve(__dirname, 'src/js/classA.js')
  },
  mode: 'production',
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css'
    })
  ],
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        parallel: true
      })
    ]
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'classA.bundle.js',
    library: 'classA',
    libraryTarget: 'umd',
    libraryExport: 'default'
  }
});

This configuration also gives the same error.

After building the classA.js using webpack, it should autodetect the new classA() in the script written in HTML file or in any .js file if we have linked the classA.bundle.js file.

Answer 1

It required just a correct and updated way to configure the webpack output settings

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'classA.bundle.js',
    library: {
      name: 'classA',
      type: 'umd',
      export: 'default',
      umdNamedDefine: true
    },
    globalObject: 'this'
  }

This webpack settings for mode production worked for me :) Thank You