正确地在webpack build中公开函数，以便HTML可以访问它

我刚刚被介绍给webpack，并不确定如何做一些非常基本的事情。正确地在webpack build中公开函数，以便HTML可以访问它

这是我的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，因为它感觉我没有处理它。

谢谢你的帮助。

来源

2017-10-05 webdev

您能否链接到您看到此功能被使用的项目或示例？ –

这是我在本地工作的东西。它tictactoe游戏，我在ts中保持游戏板逻辑，但没有找到cellClicked函数，它的权利在ts文件中。 – webdev

我相信这是做到这一点的一种方法。

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

来源

2017-10-05 01:22:07 npat89

但它不是一个图书馆，是吗？ – webdev

正确地在webpack build中公开函数，以便HTML可以访问它

回答

相关问题