无法从 Webpack 捆绑文件中找到 Class 引用

Question

我对 webpack 和前端开发还很陌生。

我有一个包含多个 classes 的 JS 文件，这个 classes 将被其他 JS 文件使用。

问题是当我直接在 Script 标签中添加 JS 文件，并检查浏览器控制台时，我可以正确检索 Class，但是当我运行 Webpack 并检查捆绑代码时，我是找不到 class

的任何参考

以下是测试代码片段：

main.js

class Human1 {
    constructor(params) {
        this.name = params.name
    }

    getName(){
        console.log(`My name is ${this.name}`);
    }
}

用于webpack的JS文件（创建新的JS以避免class名称重新声明）

class Human2 {
    constructor(params) {
        this.name = params.name
    }

    getName(){
        console.log(`My name is ${this.name}`);
    }
}

webpackConfig.js:

const path = require('path');

module.exports = {
    entry: './human.js',
    mode: 'none',   
    target: "web",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
};

Index.html

<!DOCTYPE html>
<html>
<head>
    <title>titlefdf</title>
</head>
<body>
    <script type="text/javascript" src="./bundle.js"></script>
    <script type="text/javascript" src="./main.js"></script>
    <h2> Welcome </h2>
</body>
</html>

在 html 中加载文件时。在控制台 window 中，我得到 Human1，但对于 Human2，我得到 Uncaught ReferenceError: Human2 is not defined。

任何原因我做错了什么

Answer 1

您可以通过将其公开为库来实现。这里是参考link

无法从 Webpack 捆绑文件中找到 Class 引用

Unable to find Class reference from Webpack bundled file

javascript

webpack

webpack-4