Webpack 构建 - 未定义类模块答案

【问题标题】：Webpack build - class module is not definedWebpack 构建 - 未定义类模块
【发布时间】：2021-07-19 15:49:49
【问题描述】：

我正在尝试构建导出类并使用Webpack 捆绑它。

在构建类之后，我为 webpack 配置了所有可能的选项，以在 outputs 选项中进行配置，但它仍然给出了 [name of module] 未定义或者它不是构造函数。

我尝试了两种方法

方法 1

我的 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 模块

方法2

我的 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()。

【问题讨论】：

已经被我解决了

标签： javascript class webpack build webpack-dev-server

【解决方案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 设置对我有用 :) 谢谢你

【讨论】：