Closed coderaiser closed 1 year ago
I achieved this with webpack since it uses key-value pairs, but I cannot migrate to v5 because old plugins unsupported and new https://github.com/webpack-contrib/mini-css-extract-plugin/issues/1013 while developing Cloud Commander.
Not sure why did you said it, because we support it and have always supported it, please read documentation, sorry no one will write code for you, there are a lot of example for splitting code, for example - https://github.com/webpack-contrib/mini-css-extract-plugin#extracting-css-based-on-entry, you can configure it as you want, it is very flexibility
@alexander-akait this is amazing that you responded after couple month that "no one will write code for me", but I usually write code for my consumers, and don't think that this is a problem 🤷♂️.
@coderaiser Sorry, what are you waiting for? Have you provided any attempts to achieve this behavior, no attempts (only code that someone needs to understand) and expecting someone to write it for you? Looks pretty disrespectful. I always help everyone, you can see it in my activity. But here I have to spend enough time to understand what you have written, then guess what you expect, and solve this problem for you (sorry stats output is not helpful here). If you provide a more detailed description of what you have and what you expect and what problem you are facing, then I will undoubtedly help you.
I provided you a link on how you can split files and how it is configured with examples, further actions is a setting with the wishes that you need, but no one else but you knows this.
@alexander-akait could you please help me with migration?
As I see generated css
names relates to entry
:
keep your CSS bundled according to entry
module.exports = {
entry: {
foo: path.resolve(__dirname, "src/foo"),
bar: path.resolve(__dirname, "src/bar"),
},
optimization: {
splitChunks: {
cacheGroups: {
fooStyles: {
type: "css/mini-extract",
name: "styles_foo",
chunks: (chunk) => {
return chunk.name === "foo";
},
enforce: true,
},
barStyles: {
type: "css/mini-extract",
name: "styles_bar",
chunks: (chunk) => {
return chunk.name === "bar";
},
enforce: true,
},
},
},
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
}),
],
};
But I have much more css files to generate that entries I have:
'nojs',
'view',
'config',
'terminal',
'user-menu',
Is it possible to generate more files that entries I have?
Feature Proposal
Ability to use the same api as
extract-text-webpack-plugin
has.Feature Use Case
Generating mentioned in list css files to
dist
directory.Please paste the results of
npx webpack-cli info
here, and mention other relevant informationHere is my current webpack v4 output:
Here is my webpack v4 config and here is webpack v5 config.
Could you please help me to migrate to
mini-css-extract-plugin
and achieve the same flexibility I had withextract-text-webpack-plugin
, which helped me to generate all css files indist
directory and then just lazy load them when they needed with onecommon.css
which is loaded by default.