在 webpack 构建中正确公开函数，以便 HTML 可以访问它答案

【问题标题】：Properly expose function in webpack build so HTML can access it在 webpack 构建中正确公开函数，以便 HTML 可以访问它
【发布时间】：2018-03-16 12:43:21
【问题描述】：

我刚被介绍给 webpack，不知道如何做一些非常基本的事情。

这是我的 webpack 文件。

 const webpack = require('webpack');
    module.exports = {
    resolve: {
        extensions: ['.ts', '.js']
    },
    entry: "./src/game.ts",
    output: {
        path: __dirname, 
        filename: "myGame.js"
    },
    module: {
        loaders: [
            { 
                test: /\.ts$/,
                loader: ['awesome-typescript-loader?tsconfig=tsconfig.json']
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }
        ]
    }
}

这是我的标记文件。

<!DOCTYPE html>
<html>
    <head>
        <title>Tic tac toe</title>
        <link rel="stylesheet" href="assets/styles.css">
        <script src="game.js"></script>

    </head>
    <body>
        <div class="center">
            <button type="button" onclick="resetGame()">
                New game
            </button>
        </div>
        <div class="container">
            <div>
                <div class="cell" onclick="cellClicked(event, 0, 0)"></div>
                <div class="cell" onclick="cellClicked(event, 1, 0)"></div>
                <div class="cell" onclick="cellClicked(event, 2, 0)"></div>
            </div>
        </div>
    </body>
    <script src="game.js"></script>
</html>

我的标记如何知道 cellClicked 和 reset 函数是什么？

我知道我可以将它们设置为窗口对象，然后它就会知道，但感觉就像一个糟糕的设计。

任何人都可以帮助我理解 webpack，因为我觉得我无法处理它。

感谢您的帮助。

【问题讨论】：

您能否链接到您看到使用此功能的项目或示例？
这是我在本地工作的东西。它是tictactoe游戏，我将游戏板逻辑保存在ts中，但找不到cellClicked函数，它就在ts文件中。

标签： javascript typescript webpack ecmascript-6

【解决方案1】：

我相信这是一种方法。

{
  "output": {
    "library": your_obj,
    "libraryTarget": "var"
  }
}

【讨论】：

但它不是图书馆，是吗？