[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:
     Type:  enhancement       |     Status:  new
 Priority:  normal            |  Milestone:  Awaiting Review
Component:  Build/Test Tools  |    Version:  trunk
 Severity:  normal            |   Keywords:
  Focuses:                    |
------------------------------+-----------------------------
 With [https://core.trac.wordpress.org/ticket/40894 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 [https://webpack.js.org/ 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
 [https://webpack.js.org/concepts/hot-module-replacement/ 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:

 - copying files: https://webpack.js.org/plugins/copy-webpack-plugin/
 - uglification: https://webpack.js.org/plugins/uglifyjs-webpack-plugin/
 - Sass to CSS compilation: https://github.com/webpack-contrib/sass-loader
 - CSS post processing (autoprefixing) and linting:
 https://github.com/postcss/postcss-loader
 - JS linting: https://github.com/webpack-contrib/eslint-loader

 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.

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