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

【问题标题】：Why html file doesn't see function in bundle.js?为什么 html 文件在 bundle.js 中看不到函数？
【发布时间】：2016-12-03 07:03:18
【问题描述】：

开始使用 webpack 和 stack。我生成的 html 文件由带有事件 onclick 的字符串组成。但是我的 html 文件在生成的文件 bundle.js 中看不到函数。捆绑 js 文件连接成功（console.log 有效）。但是如果我在 html 中写 <script>function bar()...</script>，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'
    })
]
};

【问题讨论】：

标签： javascript html webpack

【解决方案1】：

那是因为你没有导出你的函数。 WebPack 的主要好处之一是默认情况下函数不会放在全局范围内。将export default 添加到您的声明中：

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

【讨论】：

不，它不起作用。我决定了这个问题：window.bar = bar;这是怎么工作的？在哪里读到这个？

【解决方案2】：

使用 webpack，您必须明确地将名称放在全局命名空间中。大概有many ways to do this，不过最简单的还是用浏览器的window对象：

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

或

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

【讨论】：