时间戳

首页 > 解决方案 > 无法从 Webpack 捆绑文件中找到类引用

javascript - 无法从 Webpack 捆绑文件中找到类引用

问题描述

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

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

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

以下是测试代码片段：

main.js

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

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

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

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

索引.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 加载时。在控制台窗口中我得到 Human1 但对于 Human2 我得到Uncaught ReferenceError: Human2 is not defined.

任何原因我做错了什么

标签： javascriptwebpackwebpack-4

解决方案

You can do so by exposing it as Library. Here is the reference link

推荐阅读