Jadi, yang saya coba lakukan adalah, buat file html bernama index.html berdasarkan template.html, yang memiliki gaya berdasarkan style.css dan fungsi handleClick yang dideklarasikan di index.js. Kode di bawah ini berfungsi untuk penataan gaya, tetapi handleClick tidak berfungsi. Apakah ini mungkin?

Ini webpack.config.js saya

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'
        })
    ]
}

Ini index.js saya

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

Ini template.html saya

<!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>

Dan ini style.css saya

div {
 background-color:blue;
}
0
Kevin Chandra 28 Oktober 2019, 10:25

2 jawaban

Jawaban Terbaik

Cara yang lebih baik adalah menambahkan addEventListener ke elemen itu menggunakan file js Anda. Anda dapat melakukannya seperti ini:

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

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

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

Anda mungkin perlu membungkus yang berikut ini dalam document.onload agar dapat berfungsi.

1
Arseniy-II 28 Oktober 2019, 09:18

Sarankan untuk memeriksa namespace dari index.js - seperti yang saya harapkan, webpack akan membungkusnya dalam namespace. Cobalah untuk mendefinisikan fungsi pada namespace jendela.

window.handleClick = () => console.log('Clicked');
0
Bohdan Oliinyk 28 Oktober 2019, 09:06