我正在尝试构建导出类并使用Webpack将其绑定。
在构建类之后，我用outputs选项中要配置的所有可能选项配置了webpack，但它仍然给出了未定义的[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-未定义A类模块
方法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之后，它应该在用HTML文件编写的脚本中自动检测new classA()，或者在任何.js文件中自动检测(如果我们链接了classA.bundle.js文件(。
只需要一种正确且更新的方式来配置webpackoutput设置
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'classA.bundle.js',
library: {
name: 'classA',
type: 'umd',
export: 'default',
umdNamedDefine: true
},
globalObject: 'this'
}
此模式生产的webpack设置对我有效：(谢谢