[wp-trac] [WordPress Trac] #43731: Use Webpack + NPM scripts to build all the things

[WordPress Trac]

#43731: Use Webpack + NPM scripts to build all the things
------------------------------+------------------------------
 Reporter:  omarreiss         |       Owner:  (none)
     Type:  task (blessed)    |      Status:  new
 Priority:  normal            |   Milestone:  Awaiting Review
Component:  Build/Test Tools  |     Version:  trunk
 Severity:  normal            |  Resolution:
 Keywords:                    |     Focuses:
------------------------------+------------------------------

Comment (by herregroen):

 During the course of WordCamp Europe I've prepared a patch that will build
 all source javascript using WebPack.

 This allows us to have a single pipeline through which all JS passes. All
 grunt tasks that were previously involved in building Javascript have been
 replaced with equivalent WebPack plugins so that everything is handled in
 one place.

 The main advantage of doing so is significantly improved watch times for
 JS, most files are now under 100ms after these changes on my machine and
 even the biggest files only take around 350ms.

 Overall build times are mostly the same as vendor and node_module
 dependencies are currently handled in the exact same manner ( copy, minify
 and validate ). However this does open the path to start importing
 dependencies such as jQuery through `require` and building them with the
 CommonsChunkPlugin, doing so should significantly speed up the overall
 build time.

 Another advantage is that this open up the path to start splitting up some
 of the extremely large JS files that exist in WordPress, such as the
 Customiser, into a much more modular approach while maintaining backwards
 compatibility in our output files. This should make it trivial to set up
 the Customiser in a similar way as the Media Library.

 This will also make it much easier to start extracting useful parts of
 WordPress JS to the Packages repo and importing these as a dependency into
 WordPress as well as easily allowing access to the same dependencies for
 example Gutenberg is using without having to duplicate code or jump
 through any hoops.

 WebPack does add it's own bootstrap code to each file it's build which
 slightly increases file sizes, while with most files this is an extremely
 minimal increase we do have some JS files that are only several lines and
 in these cases it's a relatively large increase. I think the ideal
 solution here would be to phase out these files and instead use the
 options WebPack provides to import these where necessary, but if this is
 problematic on the short term it's possible to adapt the production build
 to instead of fully building these files simply copy and minify them to
 ensure there's no difference in the final build.

 The current patch successfully builds all JS with no files missing and all
 tests passing.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/43731#comment:8>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform