WordPress.org

Make WordPress Core

Opened 6 weeks ago

Last modified 5 weeks ago

#43731 new task (blessed)

Use Webpack + NPM scripts to build all the things

Reported by: omarreiss Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: trunk
Component: Build/Test Tools Keywords:
Focuses: Cc:

Description

With the introduction of Webpack in WordPress core, we could consider using it to perform build tasks currently performed with Grunt.

The main advantage of having Webpack build everything is that this would reduce the different tools developers would have to learn in the standard development process for WordPress core. NPM scripts would also make the available tools more discoverable and understandable through package.json.

Having a unified approach towards building / bundling also helps in other area's, such as general asset management and devtooling. It could for example be great if we could start using Webpack dev server at some point to serve assets in development and introduce hot module replacement.

Webpack would be totally suitable for this goal, as can also be read from its documentation:

Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

Webpack provides a unified approach towards building. For example: It would be quite easy to configure Webpack to perform the following tasks:

The above tasks are just some of the more prominent examples. But anything is possible really. NPM scripts can be used to invoke the separate tasks like linting, building etc.

Attachments (2)

jshint.patch (7.9 KB) - added by youknowriad 6 weeks ago.
JSHint to NPM script
jshint.2.patch (8.1 KB) - added by youknowriad 6 weeks ago.
I was missing some files in the original patch. That npm script line is way too big, I was thinking of creating a separate bin/jshint script, what do you think?

Download all attachments as: .zip

Change History (7)

This ticket was mentioned in Slack in #core-js by adamsilverstein. View the logs.


6 weeks ago

#2 @netweb
6 weeks ago

  • Type changed from enhancement to task (blessed)

#3 @dingo_bastard
6 weeks ago

I had some issues when using copy-webpack-plugin to bundle my plugin, and I used https://github.com/gregnb/filemanager-webpack-plugin. Worked better than copy-webpack-plugin.

@youknowriad
6 weeks ago

JSHint to NPM script

#4 @youknowriad
6 weeks ago

So I started looking at this today, and the Gruntfile.js looks way too complex to move to WebPack on one step. I propose we do it iteratively: move task by task to npm scripts while keeping Grunt as the task manager, and at some point, it will become obvious that we can just remove it.

I know we're also planning to move to ESlint instead of JSHint and this would also be easier if the JSHint setup was a separate npm script. So in this first patch I'm proposing to move the JSHint script to an npm script, still call it in the Gruntfile to keep the toolchain as is (precommit).

I don't have a strong confidence in Trac and the workflow around the patches and stuff. Let me know if I'm doing something wrong.

Last edited 6 weeks ago by youknowriad (previous) (diff)

@youknowriad
6 weeks ago

I was missing some files in the original patch. That npm script line is way too big, I was thinking of creating a separate bin/jshint script, what do you think?

This ticket was mentioned in Slack in #core-js by omarreiss. View the logs.


5 weeks ago

Note: See TracTickets for help on using tickets.