运行 webpack 后未定义 Javascript 函数答案

【问题标题】：Javascript function is undefined after running webpack运行 webpack 后未定义 Javascript 函数
【发布时间】：2020-08-12 19:11:06
【问题描述】：

这是我的 webpack.config.js

module.exports = {
    entry: "./src/index.js",//path relative to this file
    output: {
        filename: "../frontEnd/bundle.js",//path relative to this file
    },
    externals: {
        puppeteer: 'require("puppeteer")',
    },
    mode: 'development'
  }

这是运行 webpack 的文件 index.js：

var backendScript = require('../backEnd/backend');
var safeBackendScript = require('../backEnd/safeBackend');

function test(){
    document.getElementById("Fname").value= "John"
    document.getElementById("Lname").value= "Smith"
    document.getElementById("Phone").value= "1234567890"
    document.getElementById("Email").value= "Jsmith@domain.com"
    document.getElementById("Saddress").value= "123 Main Street"
    document.getElementById("Zip").value= "12345"
    document.getElementById("country").value= "USA"
    document.getElementById("state").value= "NJ"
    document.getElementById("cardtype").value= "AE"
    document.getElementById("Cname").value= "JOHN H SMTIH"
    document.getElementById("Cnumber").value= "1234567890101112"
    document.getElementById("CVV").value= "123"
    document.getElementById("cardmonth").value= "01"
    document.getElementById("cardyear").value= "2035"
    document.getElementById("category").value= "jackets"
    document.getElementById("kword").value= "Supreme Jacket"
    document.getElementById("delay").value= "120"
    document.getElementById("color").value= "C2"
    document.getElementById("size").value= "L"
}

module.exports = {
    test: test
}

然后这是我的 html 函数运行：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script type= "text/javascript" src="./bundle.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Supreme Bot</title>
</head>
<body style="margin: 20px">
   <button onclick="test()"> test </button>
</body>
</html>

然后单击按钮后，它指出 test() 未定义... 我想不通... 非常感谢任何帮助。

【问题讨论】：

标签： javascript html webpack

【解决方案1】：

您没有将test() 导出到window。

module.exports = {...} 不会自动注入window，但是：

您可以设置output.libraryTarget: 'window' 和output.library: 'something' 配置选项并获取window.something.test() (docs here)，或
您可以在 Webpack 入口点的末尾手动执行 window.test = test;，而不是导出内容。

【讨论】：