Use webpack prebuild rimraf instead of clean-webpack-plugin

[MV10]

As you know, the clean-webpack-plugin required by webpack-config-single-spa blindly deletes the output from any previous build.

This is a problem in our project because each app's webpack config overrides the per-app dist output directory to use a common build target. (This is basically a side-effect of our production CI/CD process which is limited to a simple zip/unzip operation after a Lerna-driven monorepo build.)

Since we like the other functionality of webpack-config-single-spa we have a fairly hacky call in each webpack config to remove this plugin from defaultConfig.plugins.

It occurs to me that it might be cleaner for create-single-spa to generate a webpack prebuild script using rimraf, which would make it easy to opt-in or opt-out of this particular behavior. (Normally I'd offer to PR this, I try to contribute to OSS where I can, but I don't do any JS-based development at home, and unfortunately my work machine is heavily regulated and github access is blocked.)

[joeldenning]

I've run into that problem, too. Modifying the webpack config is a good approach that we specifically support in create-single-spa, since it's impossible to fully cover every organization's needs.

The following code in the webpack config should work:

webpackConfig.plugins = webpackConfig.plugins.filter(p => p.constructor.name !== 'CleanWebpackPlugin');

I don't see much advantage to moving the code to the package.json instead of the webpack config - it's a one line change for you in either the package.json or the webpack config either way. Using a webpack plugin makes it more likely to have correct behavior, since the cleaned directory is derived from the webpack output dir instead of hard coded.

One thing to note is that clean-webpack-plugin's dependencies are not compatible with typescript and webpack 5. See johnagan/clean-webpack-plugin#188. For that reason, we have removed clean-webpack-plugin in the 2.x beta versions of create-single-spa that use webpack 5. See #226.

Another thing to note is that clean-webpack-plugin's functionality is being moved into webpack core. See webpack/webpack#12221. Once it's in webpack core, the change to the webpack config will be even simpler: output.clean = false. Once that's released, we'll probably reinstate the cleaning behavior as the default in webpack-config-single-spa@2.

To summarize: for webpack-config-single-spa@1 I'd modify the webpack config as shown above. For v2, it's turned off for now but will come back once output.clean is released in webpack 5. At that point, you can modify your webpack config to turn off output.clean.

If you have a strong aversion to making these changes in each of your projects, you can create an npm package similar to webpack-config-single-spa-ts, which depends on webpack-config-single-spa but modifies the webpack config slightly.

[MV10]

All good points, thanks -- but shouldn't filter select everything except the plugin to remove? (In case someone else lands on this issue...)

[joeldenning]

Good catch I've updated the code in my previous comment