Webpack plugin to modify files after compilation

Question

I am writing a Webpack plugin that should replace a part of the JS code with a list of Webpack\'s generated CSS files. Imaging this JS code:

ReactWebComponen         


        

Answer 1

It appears this sort of thing is simple enough to be handled by loaders, of which there are multiple (some better than others):

https://www.npmjs.com/package/string-replace-loader

https://www.npmjs.com/package/regexp-replace-loader

https://www.npmjs.com/package/replace-loader

If you want to go about making your own plugin to do this (I just went through the process to do something a bit more sophisticated than just regex replacement), I was able to piece my solution together from basically these three pages:

https://github.com/webpack/webpack/blob/master/lib/BannerPlugin.js

https://webpack.js.org/api/plugins/compilation/#optimize-chunk-assets-chunks-chunk-async

https://github.com/webpack/webpack-sources