在WordPress中集成Frontstreet框架时Gulp/Webpack脚本异常排查

Let's break down and fix the issues step by step:

1. Fix the Critical Typo (Direct Cause of Entry Module Error) #

The terminal error Can't resolve './wp-content/themes/front-theme/js/scritps.js' is a simple spelling mistake—you wrote scritps.js instead of scripts.js (missing the letter p).

Update your webpack.config.js entry path:

entry: { App: settings.themeLocation + "js/scripts.js" }, // Correct "scritps" to "scripts"

2. Stop Overwriting the Pre-built Frontstreet.js #

Your Webpack output is set to overwrite the original frontstreet.js framework file, which will break core functionality. Change the output filename to something unique:

In webpack.config.js:

output: { 
  path: path.resolve(__dirname, settings.themeLocation + "js"), 
  filename: "custom-frontstreet.js" // Replace "frontstreet.js" with a unique name
},

Then update your functions.php to load both the framework and your custom script (with proper dependencies):

// Load pre-built Frontstreet framework
wp_enqueue_script('frontstreet-js', get_theme_file_uri('/js/frontstreet.js'), array('jquery'), '1.0', true);
// Load your custom bundled script (depends on Frontstreet and jQuery)
wp_enqueue_script('custom-frontstreet-js', get_theme_file_uri('/js/custom-frontstreet.js'), array('frontstreet-js'), '1.0', true);

3. Fix jQuery Compatibility with WordPress #

WordPress loads jQuery as a global variable, but Webpack tries to bundle it as a module by default. Add an externals rule to your webpack.config.js to map your import to the global jQuery instance:

module.exports = {
    // ... existing config
    externals: {
        jquery: 'jQuery' // Tell Webpack to use the global WordPress jQuery
    },
    // ... existing config
}

This will make your import $ from 'jquery'; work correctly without conflicts.

4. Verify Gulp Watch Paths #

Double-check your Gulp watch script path to ensure it matches where your scripts.js lives:

gulp.watch([settings.themeLocation + 'js/src/js/blocks/*.js', settings.themeLocation + 'js/scripts.js'], gulp.parallel('waitForScripts'));

Since your scripts.js is directly in the js/ directory (not js/src/), this path is correct—but adjust it if you restructure your files later.

5. Test the Fix #

1. Delete the old frontstreet.js file from your theme's js/ folder to avoid leftover overwritten code
2. Restart gulp watch
3. Refresh your site—you should see the "test" alert pop up, and the terminal will no longer throw the entry module error.

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