Webpack 構建 - 類模塊未定義

Question

我正在嘗試構建導出類並使用Webpack將其捆綁。

構建類后，我使用所有可能的選項配置了 webpack，以在outputs選項中配置，但它仍然給出未定義的[name of module]或者它不是構造函數。

我嘗試了兩種方法

方法一

我的classA.js文件

export class classA {

  constructor(target, options) {

    }
}

我的webpack.config.js文件

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'
  }
});

當我在不導入 index.js 文件中的 classA.js 的情況下運行代碼時，出現錯誤：

Webpack 構建 ReferenceError - classA 模塊未定義

方法二

我的classA.js文件

export default class classA {

  constructor(target, options) {

    }
}

我的webpack.config.js文件

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'
  }
});

此配置也給出了相同的錯誤。

使用 webpack 構建 classA.js 后，如果我們鏈接了classA.bundle.js文件，它應該自動檢測以 HTML 文件或任何 .js 文件編寫的腳本中的new classA() 。

Answer 1

它只需要一種正確且更新的方式來配置 webpack output設置

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

這個模式生產的 webpack 設置對我有用 :) 謝謝