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

Question

开始使用 webpack 和堆栈。我生成的 html 文件由字符串和 onclick 事件组成。但我的 html 文件在生成的文件 bundle.js 中看不到函数。捆绑 js 文件已成功连接(console.log 有效)。但如果我写<script>function bar()...</script>在 html 中，onclick 工作。帮助。尝试在头部、开始正文、正文/文件末尾连接文件 - 看不到功能。从 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(){...};