Wp-calypso: Package: Shared builder config (Master)

[sirreal]

This is a tracking issue for extracting a shared config that can be used as a package.

Known tasks:

• [ ] Move the webpack.config.js to a packge. See what breaks. Not intended to be merged on its own, but to provide information to drive smaller, incremental changes.
• [ ] Break down monolithic webpack.config.js file into smaller pieces.
  
  
  
  • basically bits from the list go to their own files under /packages/calypso-webpack (or similar folder name) and we at first just import them from there to main config.
  
  
  • Right now they mostly listen to environment variables in base webpack.config.js config, but we'll need to turn them into functions that can take parameters. So minification function should have minify=true parameter rather than NODE_ENV=production etc.
  
  
  • first target: "Extract SCSS build toolchain" https://github.com/Automattic/wp-calypso/issues/31028
  
  
• [ ] Identify what is a "core" shareable config and what is Calypso-specific (not worth sharing).
  
  
  
  • Sections loader is a good example of something too specific.
  
  
• [ ] Provide a way of merging configs (just use _.merge?)
• [ ] (@sirreal) Propose a single module that exports runtime configuration values. Translates env (and potentially config?) into constant named exports that serve to parameterize the build configuration. webpack.env.js? All runtime configuration config should come from this single module, providing a single place to consult defaults and a single source of truth.

[jsnajdr]

Related: webpack has an experimental PR for presets: ability to split the config into modules and compose presets together.

The PR has been rather inactive for the last year, but still good to know about. We might reuse some ideas on how to split and combine config bits together?

[scruffian]

This is all done except for the bits needed in https://github.com/Automattic/jetpack/issues/11745