Webpack配置jQuery后，.cshtml中提示$未定义怎么解决？

问题根源 #

你遇到的Uncaught ReferenceError: $ is not defined核心原因是脚本执行顺序不匹配：

• 你在_Layout的<head>里给Webpack打包的脚本加了defer属性，这意味着该脚本会等到整个DOM解析完成后才开始加载执行。
• 但Profile.cshtml里的内联脚本是同步执行的，在DOM解析过程中就会运行，这时候jQuery还没被加载到全局环境，自然找不到$。
• 虽然你配置了ProvidePlugin和expose-loader，但这些都是在Webpack打包的脚本里生效，而内联脚本跑在了它前面。

解决方案 #

方案1：让内联脚本等待DOM和jQuery加载完成 #

把内联脚本包裹在DOMContentLoaded事件监听里，确保只有当所有脚本（包括带defer的）加载完成后才执行：

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
    const accountDetailsModal = document.getElementById("editAccountModal");
    const selectedState = "@Model.AccountProfile.State";
    accountDetailsModal.addEventListener("show.bs.modal", event => {
        let stateField = document.getElementById("State");
        stateField.value = selectedState;
    });

    $("#editAccountModal").on("submit", "#form-accountprofileedit", function (e) {
        e.preventDefault();
        var form = $(this);
        $.ajax({
            url: form.attr("action"),
            method: form.attr("method"),
            data: form.serialize(),
            success: function (partialResult) {
                $("#formContent").html(partialResult);
            }
        });
    });
});
</script>

方案2：调整打包脚本的加载位置 #

去掉defer属性，并把脚本标签移到<body>的末尾（在所有页面内容之后），这样打包脚本会同步加载执行，内联脚本在视图底部的话，会在jQuery之后运行：

<!-- _Layout.cshtml -->
<body>
    <!-- 页面所有内容 -->
    
    <script src="/dist/site.entry.js"></script>
</body>

方案3：手动将jQuery挂载到全局（兜底方案） #

在site.js里手动把jQuery绑定到window对象，确保全局环境能访问到$和jQuery：

// site.js
import $ from 'jquery';
// 手动挂载到全局
window.$ = $;
window.jQuery = $;

// 其他导入代码
import '@popperjs/core';
import 'bootstrap';
import 'jquery-validation';
import 'jquery-validation-unobtrusive';

// CSS导入...

额外检查 #

• 确认Webpack重新打包过：执行npm run build，确保site.entry.js包含最新的修改。
• 检查浏览器开发者工具的Network标签，确认site.entry.js已经成功加载，没有404错误。

内容的提问来源于stack exchange，提问作者dev_in_training