在WebPack中添加自定义JS并通过MVC HTML Helper调用的问题

云上老周

2026-9-29

问题根因

webpack 默认会将所有模块代码封装在独立的闭包作用域中，你在模块内部定义、导入的函数默认不会暴露到全局 window 对象上，而 Razor 里写的内联 onchange="EventChange()" 事件会从全局作用域查找对应函数，自然找不到对应的方法。
另外你当前的代码还有一个导入语法错误：eventMessage.js 用的是命名导出，site.js 里用默认导入的写法拿到的会是 undefined。

修复方案

方案1：保留内联onchange写法（快速修复）

修正 site.js 的导入语法，同时把函数挂载到全局window对象：

// 把原来的 import EventChange from '../js/eventMessage'; 改成下面的写法
import { EventChange } from '../js/eventMessage';
// 挂载到全局，供内联事件调用
window.EventChange = EventChange;

console.log('The \'site\' bundle has been loaded!');

确保你的布局页/Index.cshtml 已经正确引入webpack打包后的产物：

<!-- 放在body标签末尾，确保DOM加载完成后执行 -->
<script src="~/dist/site.entry.js"></script>

方案2：移除内联事件，用jQuery绑定（更符合模块化规范，推荐）

这种方式不需要污染全局作用域，更符合webpack模块化的设计思路：

修正 site.js 的导入语法，添加事件绑定逻辑：

import $ from 'jquery'; // 确保导入jQuery实例
import { EventChange } from '../js/eventMessage';

// 页面DOM加载完成后绑定事件
$(document).ready(function() {
  $('.EditCheckbox').on('change', EventChange);
});

console.log('The \'site\' bundle has been loaded!');