Webpack编译后WordPress无法加载JS文件求助

1. 检查主题模板的footer.php文件 #

确保在</body>标签之前添加了<?php wp_footer(); ?>。你在wp_enqueue_script的最后一个参数传了true，表示脚本会被输出到footer区域，而WordPress依赖wp_footer()钩子来渲染这些脚本。如果没有这个函数调用，脚本标签根本不会出现在页面里，自然看不到网络请求。

2. 简化Webpack配置，优化依赖管理 #

你当前把Bootstrap作为单独入口打包，更合理的方式是在业务脚本中直接引入，让Webpack统一管理依赖：

• 修改src/index.js，添加Bootstrap引入：

import 'bootstrap/dist/js/bootstrap.min.js';

• 删除Webpack配置中entry里的bootstrap项：

entry: {
    main: './src/index.js'
},

• 同时在functions.php里删除Bootstrap脚本的注册代码，只保留main.js的引入：

wp_enqueue_script( 'main', get_template_directory_uri() . '/dist/main.js', ['jquery'], wp_get_theme()->get('Version'), true );

3. 验证主题版本号有效性 #

如果主题style.css文件未定义Version字段，wp_get_theme()->get('Version')会返回空值，可能导致脚本缓存异常。可以手动指定版本号：

wp_enqueue_script( 'main', get_template_directory_uri() . '/dist/main.js', ['jquery'], '1.0.0', true );

4. 清除缓存 #

• 在WordPress后台清除缓存插件的所有缓存（如果有）；
• 浏览器按Ctrl+Shift+R强制刷新，避免加载旧的HTML内容。

5. 确认Webpack编译产物 #

检查dist目录下的main.js（或bootstrap.js）是否正常生成，文件大小合理，无编译错误。

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