How to use mini-css-extract-plugin / ExposeRuntimeCssAssetsPlugin only during production?

[PieterBoeren]

The recommend way of working with the mini-css-extract-plugin, is to not use it in development builds. However doing so, breaks the "webpackExtractedCss" option of single-spa-css.

Is there a better solution for this possible then making the value of that option depended on which kind of build you're doing?

[joeldenning]

This discussion seems more related to single-spa-css than to create-single-spa, since create-single-spa doesn't use single-spa-css yet (although I'd like it to be added). I'm transferring this to the single-spa-css repo.

Generally I prefer keeping functionality the same for development vs production where possible. So when I use single-spa-css I just use it for both development and production. This is for two reasons:

1. Portable build artifacts - if a build artifact can be used in development, test environments, and production, then you only have to build once rather than once per environment, and can use import-map-overrides between environments to load any bundles.
2. Ability to reproduce issues - keeping the behavior the same avoids the "works on my machine, but not in production" problem.

However, if you wish to do so anyway, the normal way to solve for this is to use webpack's DefinePlugin or dotenv-webpack to replace process.env.NODE_ENV with either "development" or "production". Dead code elimination removes the unused conditional branches from output bundles.

const cssLifecycles = singleSpaCss({
  webpackExtractedCss: process.env.NODE_ENV === 'production'
});```