我正在尝试构建导出类并使用 Webpack 对其进行捆绑。
构建类后,我使用所有可能的选项配置了 webpack,以在 outputs
选项中进行配置,但它仍然给出 [name of module]
未定义或它不是构造函数。
我尝试了两种方法
export class classA {
constructor(target, options) {
}
}
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 build ReferenceError - classA 模块未定义
export default class classA {
constructor(target, options) {
}
}
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 后,如果我们链接了 new classA()
文件,它应该自动检测以 HTML 文件或任何 .js 文件编写的脚本中的 classA.bundle.js
。
答案 0 :(得分:0)
它只需要一种正确且更新的方式来配置 webpack output
设置
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'classA.bundle.js',
library: {
name: 'classA',
type: 'umd',
export: 'default',
umdNamedDefine: true
},
globalObject: 'this'
}
这个模式生产的 webpack 设置对我有用:) 谢谢