webpack-contrib / mini-css-extract-plugin

Lightweight CSS extraction plugin
MIT License
4.65k stars 390 forks source link

How to exclude `css` file by `name` #1062

Closed coderaiser closed 3 months ago

coderaiser commented 7 months ago

Feature Proposal

I see that the whole directory is merged to one css file

image

I use provided example:

const path = require(["path"](https://nodejs.org/api/path.html));
const MiniCssExtractPlugin = require(https://github.com/webpack-contrib/mini-css-extract-plugin);

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",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

And want to filter out nojs.css, but chunk.name give me only cloudcmd, here is my config:

module.exports = {
    plugins,
    module: {
        rules,
    },
    optimization: {
        splitChunks: {
          cacheGroups: {
            cloudcmdCommon: {
              type: "css/mini-extract",
              name: "cloudcmd.common",
              chunks: (chunk) => {
                  // I want to not include this files 
                  // return !/css\/(nojs|view|config|terminal|user-menu|columns.*)\.css/.test(name)
                  console.log(chunk);
                return !chunk.name.includes('modules');
              },
              enforce: true,
            },
          },
        },
    },
};

I'm migrating from extract-text-webpack-plugin and try to figure out what I should change in my webpack.config.js. here is old webpack config

Please help me, I don't think someone on stackoverflow knows how to migrate, migration guide is needed, or better a CodeMode (this is 21 century 😏), I have written a couple, but I need to understand what exactly should be changed to what.

Feature Use Case

Please paste the results of npx webpack-cli info here, and mention other relevant information

alexander-akait commented 6 months ago

@coderaiser Sorry for delat, still a problem for you?

coderaiser commented 6 months ago

Yes

alexander-akait commented 6 months ago

@coderaiser Can you create a minimum reproducible test repo with the configuration for webpack 5? And I will help you

alexander-akait commented 3 months ago

Closing due to inactivity. Please test with latest version and feel free to reopen if still regressions. Thanks!