Webpack, generate individual CSS file for each imported CSS file with MiniCssExtractPlugin

Question

I'm new to Webpack (and dev) and am trying to figure out how to use Webpack and some plugins to separate any CSS import into an individual CSS link tag.

This is my webpack-config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'development',
  devtool: 'inline-source-map',
  entry: {
    index: ['./src/assets/js/script.js'],
  },

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'assets/js/[name].bundle.js',
    assetModuleFilename: 'assets/images/[name][ext][query]',
    clean: true,
  },

  plugins: [
    new HtmlWebpackPlugin({
      chunks: ['index'],
      title: "~we don't talk about bruno~",
      filename: 'index.html',
      template: './src/index.html',
    }),
    new MiniCssExtractPlugin({
      filename: 'assets/css/[name].css',
    }),
  ],

  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          // 2. remove CSS from JS and save into an external file
          { loader: MiniCssExtractPlugin.loader },
          // 1. generate CSS into CommonJS
          'css-loader',
        ],
      },
      {
        test: /\.scss$/i,
        use: [
          // 3. remove CSS from JS and save into an external file
          { loader: MiniCssExtractPlugin.loader },
          // 2. generate CSS into CommonJS
          'css-loader',
          // 1. tranpile SCSS into CSS
          'sass-loader',
        ],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
    ],
  },
};

This is my JavaScript file:

import '../css/style.scss';
import 'animate.css';

I know Webpack is a bundler and I understand it but is there a possibility to generate index.css and animate.css individually and link it to HTML? Or maybe use another plugin and specify animate.css on the Webpack config.

Youssouf Oumar · Accepted Answer · 2023-05-06 15:52:16Z

1

Solution

You could use optimization entry of webpack.config.js. You can add this entry in your webpack.config.js after plugins array for example:

optimization: {
    moduleIds: "deterministic",
    splitChunks: {
      cacheGroups: {
        styles: {
          test: /animate.css/
          name: "animate",
          type: "css/mini-extract",
          chunks: "all",
          enforce: true,
        },
      },
    },
  },

The above configuration would generate a separate file for animate.css. However it won't generate a separate CSS file per CSS file import. It's kind of the opposite of what a module bundler is made for.

More

Often what we do is separate the code we wrote from what's coming from node_modules, with this config:

 optimization: {
    moduleIds: "deterministic",
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          chunks: "all",
        },
        styles: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          type: "css/mini-extract",
          chunks: "all",
          enforce: true,
        },
      },
    },
  },

This way, in addition to what you would normally have, you get vendors.js and vendors.css for what's coming from node_modules. See Code Splitting on Webpack's official documentation to learn more.

edited May 6, 2023 at 15:52

answered Jul 5, 2022 at 15:26

Youssouf Oumar

47.5k16 gold badges109 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

asaks- Over a year ago

Thanks. I'll read it. I saw this link, but it was too fast. It's not exactly what I expected, but I think it's a better solution.

asaks- Over a year ago

and if the vendor code isn't in the node_module folder? Maybe I downloaded manually? than I need to edit test parameter to an array e specify the file there?

Youssouf Oumar Over a year ago

Yeah you can do that. You can change the value of test. It should be a valid regEx, that’s it.

Youssouf Oumar Over a year ago

Glad I could share :)

Collectives™ on Stack Overflow

Webpack, generate individual CSS file for each imported CSS file with MiniCssExtractPlugin

1 Answer 1

Solution

More

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Solution

More

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related