extract-css-chunks-webpack-plugin
extract-css-chunks-webpack-plugin copied to clipboard
faceyspacey
Multiple warnings when upgrading webpack to v5
I am trying to upgrade webpack to v5 and I get multiple warnings coming for the extract-css-chunks-webpack-plugin plugin:
[DEP_WEBPACK_MAIN_TEMPLATE_RENDER_MANIFEST] DeprecationWarning: MainTemplate.hooks.renderManifest is deprecated (use Compilation.hooks.renderManifest instead)
[DEP_WEBPACK_MAIN_TEMPLATE_HASH_FOR_CHUNK] DeprecationWarning: MainTemplate.hooks.hashForChunk is deprecated (use JavascriptModulesPlugin.getCompilationHooks().chunkHash instead)
[DEP_WEBPACK_COMPILATION_NORMAL_MODULE_LOADER_HOOK] DeprecationWarning: Compilation.hooks.normalModuleLoader was moved to NormalModule.getCompilationHooks(compilation).loader
[DEP_WEBPACK_MODULE_ID] DeprecationWarning: Module.id: Use new ChunkGraph API
Is this plugin even needed in webpack 5? The official mini-css-extract-plugin seems much improved, it seems to work with HMR too.
Yep, we have migrated to mini-css-extract-plugin. This particular plugin is still superior in minor regards, but I'd rather use Webpack 5 at this point.
@stylemistake when you say mini-css-extract-plugin on webpack 5 supersedes the need for this plugin, are you using mini-css-extract-plugin to extract multiple stylesheets or to extract a singular sheet?
i'm having a hard time getting laravel-mix + MiniCSSExtractPlugin working with Vue2 Single File Component <style> tags, it's lumping them all into one vendor.css output file, rather than, what i desire, which is for [name].css chunks to be created on a per-vue-component basis.
i tried using <script>import(/* webpackChunkName: 'MyComponentStyles' */'my-styles.scss'</script> but that leads to a Flash of Unstyled Content (FOUC) when the page loads as the styles aren't injected and are only loaded once the JS module is mounted.
perhaps i just need to split my critical css out manually and only let the per-component styles be for sub-components or something
to further complicate things, i'm trying to use this in an Inertia.js + SSR context.
all signs were pointing to MiniCSSExtractPlugin or ExtractCSSChunks being the way to go about this, but so far neither is actually outputting multiple CSS files, nor injecting or giving me a list of css files that i can manually inject into my <head>
( my other comments on the topic: https://github.com/laravel-mix/laravel-mix/issues/2589#issuecomment-1099394291 )
@jakedowns Yes, we use mini-css-extract-plugin in tgstation (tgui) to produce static CSS files for each entry point. Perhaps you'll find this config useful.
We're not using chunking here though, so can't comment on that.
https://github.com/tgstation/tgstation/blob/1dc83191daf55d54f5e1285c2f8b1af8c2c99b75/tgui/webpack.config.js#L34-L43