Skip to content

Improve Webpack Setup: Adopt Best-Practice Extension for @wordpress/scripts #92

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
jeffpaul merged 6 commits into from
Nov 20, 2025
Merged

Improve Webpack Setup: Adopt Best-Practice Extension for @wordpress/scripts #92

jeffpaul merged 6 commits into from
Nov 20, 2025

Conversation

@theaminuli
Copy link
Member

@theaminuli theaminuli commented Nov 19, 2025 •
edited
Loading

What?

This PR updates the Webpack configuration to a production-ready approach for extending @wordpress/scripts.

Key changes:

  • Extending both entry and plugins
  • Adding RemoveEmptyScriptsPlugin to eliminate empty JS files from SCSS-only entries
  • Replacing relative paths with path.resolve for safer path handling

Why?

The previous configuration extended only the entry property and used relative paths.
This resulted in:

  • Unnecessary empty.jsfiles generated by SCSS entries
  • Less reliable path resolution
  • Limited scalability for future build extensions

The improved configuration aligns with modern WordPress tooling practices and keeps the build output cleaner, more stable, and more maintainable.

How?

  • Imported RemoveEmptyScriptsPlugin
  • Merged plugin arrays using ...defaultConfig.plugins
  • Updated entry paths using path.resolve
  • Restructured the configuration for future extensibility

Testing Instructions

  1. Run npm run build
  2. Verify:
    • No empty .js files are generated for SCSS-only entries
    • All expected .css and .js assets are correctly built
    • No path resolution errors occur
  3. Run npm run start and confirm:
    • Hot reload works normally
    • Block editor assets load correctly
  4. Inspect the build/ directory and ensure the output is clean, consistent, and free of unnecessary files

Fixed #91

@theaminuli
Add webpack-remove-empty-scripts
b994d05 
Added the 'webpack-remove-empty-scripts' package to dependencies
@theaminuli
Add start script and new dev dependency
6ce5e54 
Added 'start' script to package.json for wp-scripts and included 'webpack-remove-empty-scripts' as a new development dependency.
@theaminuli
Enhance webpack config with RemoveEmptyScriptsPlugin
2a25acd 
Added RemoveEmptyScriptsPlugin to remove empty .js files after WordPress asset generation. Updated entry paths to use path.resolve for consistency and maintainability. Refactored config to extend the default WordPress webpack configuration directly.
@github-actions
Copy link

github-actions bot commented Nov 19, 2025 •
edited
Loading

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: theaminuli <theaminuldev@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@jeffpaul jeffpaul added this to the 0.2.0 milestone Nov 19, 2025
dkotter
dkotter requested changes Nov 19, 2025
View reviewed changes
Copy link
Collaborator

@dkotter dkotter left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some JS lint errors that are being flagged but otherwise this looks good and tests well

theaminuli and others added 3 commits November 20, 2025 07:41
@theaminuli @dkotter
Refactor: Clean up whitespace in Webpack config import
62f0537 
Co-authored-by: Darin Kotter <darin.kotter@gmail.com>
@theaminuli @dkotter
Refactor: Clean up whitespace in webpack-remove-empty-scripts import
8670f67 
Co-authored-by: Darin Kotter <darin.kotter@gmail.com>
@theaminuli @dkotter
Style: Format Webpack entry definitions for consistency
db5f4be 
Co-authored-by: Darin Kotter <darin.kotter@gmail.com>
@theaminuli
Copy link
Member Author

theaminuli commented Nov 20, 2025 •
edited
Loading

Hi @dkotter ,

Some JS lint errors that are being flagged but otherwise this looks good and tests well

I’ve reviewed and resolved all the issues. Please take a look when you get a chance. Thanks for your guidance and support!

@jeffpaul jeffpaul merged commit 1f48035 into WordPress:trunk Nov 20, 2025
15 of 21 checks passed
@jeffpaul jeffpaul modified the milestones: 0.2.0, 0.1.0 Nov 20, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@dkotter dkotter dkotter approved these changes

@JasonTheAdams JasonTheAdams Awaiting requested review from JasonTheAdams

Assignees

@theaminuli theaminuli

Labels

None yet

Projects

None yet

Milestone

0.1.0

Development

Successfully merging this pull request may close these issues.

Best Practice for Extending @wordpress/scripts Webpack Config

3 participants

@theaminuli @dkotter @jeffpaul