Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multiple warnings when upgrading webpack to v5 #302

Open
vdineva opened this issue Dec 1, 2020 · 6 comments
Open

Multiple warnings when upgrading webpack to v5 #302

vdineva opened this issue Dec 1, 2020 · 6 comments

Comments

@vdineva
Copy link

vdineva commented Dec 1, 2020

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

@vdineva vdineva changed the title Multiple warning when upgrading webpack to v5 Multiple warnings when upgrading webpack to v5 Dec 4, 2020
@ScriptedAlchemy
Copy link
Collaborator

Send a PR, or ill get around to it soon

@stylemistake
Copy link

This can't come sooner. 😔

@SystemParadox
Copy link

Is this plugin even needed in webpack 5? The official mini-css-extract-plugin seems much improved, it seems to work with HMR too.

@stylemistake
Copy link

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.

@jakedowns
Copy link

jakedowns commented Apr 15, 2022

@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: laravel-mix/laravel-mix#2589 (comment) )

@stylemistake
Copy link

stylemistake commented Apr 20, 2022

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants