Javascript 如何在html中使用webpack构建的js文件中声明的函数？_Javascript_Node.js_Webpack

Javascript 如何在html中使用webpack构建的js文件中声明的函数？

javascript node.js webpack

Javascript 如何在html中使用webpack构建的js文件中声明的函数？,javascript,node.js,webpack,Javascript,Node.js,Webpack,所以，我想做的是，基于template.html生成一个名为index.html的html文件，该文件的样式基于style.css和一个在index.js中声明的函数handleClick。下面的代码适用于样式，但handleClick不起作用。这可能吗这是我的webpack.config.js const path = require('path') const HTMLWebpackPlugin = require('html-webpack-plugin') module.export

所以，我想做的是，基于

template.html

生成一个名为

index.html

的html文件，该文件的样式基于

style.css

和一个在

index.js

中声明的函数

handleClick

。下面的代码适用于样式，但

handleClick

不起作用。这可能吗

这是我的

webpack.config.js

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: {
        'page': './src/index.js'
    },
    output: {
        path: path.join(__dirname, '/dist'),
        filename: "[name].js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    'babel-loader'  
                ]
            },
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ]
            }
        ]
    },
    plugins: [
        new HTMLWebpackPlugin({
            filename: 'index.html',
            template: './src/template.html'
        })
    ]
}

require('./style.css');
function handleClick(){
    alert("called from index")
}

这是我的

index.js

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: {
        'page': './src/index.js'
    },
    output: {
        path: path.join(__dirname, '/dist'),
        filename: "[name].js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    'babel-loader'  
                ]
            },
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ]
            }
        ]
    },
    plugins: [
        new HTMLWebpackPlugin({
            filename: 'index.html',
            template: './src/template.html'
        })
    ]
}

require('./style.css');
function handleClick(){
    alert("called from index")
}

这是我的

template.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My Page's Title</title>
  </head>
  <body>
    <div>This background should be blue</div>
    <button onclick="handleClick()"> click me </button>
  </body>
</html>

建议检查index.js的名称空间-正如我所料，webpack会将其包装在名称空间中。尝试在窗口命名空间上定义函数

window.handleClick = () => console.log('Clicked');

更好的方法是使用js文件向该元素添加

addEventListener

。您可以这样做：

<button id="buttonWithFunction"> click me </button>

<script>
// pure js
document.getElementById('buttonWithFunction').addEventListener('click', handleClick);

//with jquery loaded
$('#buttonWithFunction').on('click',function() {
     handleClick();
})

点击我
//纯js
document.getElementById（'buttonWithFunction'）。addEventListener（'click'，handleClick）；
//加载jquery时
$（“#按钮带函数”）。在（'click'，function（）上{
handleClick（）；
})

您可能需要将以下内容包装到document.onload中才能使用。

是否可以

要求一个css文件，并在生成的html文件中使用的同一脚本文件中声明一个函数？我试图用脚本加载器加载js文件，但是样式无法加载，所以我不可能这么做？因为如果我将这个代码函数handleClick（）{alert（“从索引调用”）}
放在生成的js文件page.js
中，按钮将工作，因为expectedIt不一定是不可能的，因为代码中没有任何内容（有限制）。然而，最好的做法是将所有内容分开。您将html、css和js分开，这样代码的维护就容易多了。我相信你可能想做的是。这允许您将其用作任何其他库。另外，我也不一定建议更改生成的文件，因为任何更改都会被我尝试过的每个网页覆盖，并且您的答案可以正常工作，无需将代码包装到文档中。onload
。我实际上想做的是编写javascript函数（不必将我的元素添加到事件侦听器中），并以简单的方式在生成的html中使用它。（我的意思是，如果我必须在我最终拥有的所有按钮中添加一个事件侦听器，这会有点麻烦），是的，我们可以将css移动到专用脚本中，这可能吗？或者我必须手动添加侦听器？我仍然不确定您使用它的目的。或者您的特定集成的应用程序是什么。其中一些问题也超出了原始问题的范围，有些问题让我有些困惑。“将css移动到专用脚本”是什么？如果我让您感到困惑，很抱歉，让我们忘记我之前的评论，因为这个问题已经回答了