为什么html文件在bundle.js中看不到函数？

Question

开始和webpack一起工作，然后堆叠。我生成的html文件包含带有事件onclick的字符串。但是我的html文件在生成的文件bundle.js中看不到函数。已成功连接捆绑包js文件(console.log works)。但是如果我用超文本标记语言编写<script>function bar()...</script>，onclick work。帮助。尝试连接头部的文件，乞求主体，主体的结尾/文件-看不到函数。从main.js生成的Bundle.js：

require("path to css...");
function bar(){...};

html中的字符串：

<div class="foo" onclick="bar()">...</div>

Bundle.js：

var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: "./src/main.js",
    output: {
    path: "dist",
    filename: "bundle.js"
},

module: {
    loaders: [
    {
        test: /\.js$/,
        loader: "babel-loader",
        options: { presets: ["es2015"] }
     ,
    {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style','css')
    },
    {
        test: /\.jade$/,
        loader: "jade"
    }]
},
plugins: [
    new ExtractTextPlugin("main.css"),
    new HtmlWebpackPlugin({
        template: './src/jade/index.jade'
    })
]
};

Answer 1

这是因为你没有导出你的函数。WebPack的主要优点之一是默认情况下不会将函数放在全局作用域中。将export default添加到声明中：

export default function bar(){...};

Answer 2

对于webpack，您必须显式地将名称放入全局命名空间中。可能有many ways to do this，但最简单的是使用浏览器的window对象：

window.bar = function(){...};

或

function bar(){...};
window.bar = bar;