Remove css/html from the bundle after it has been required and processed by webpack

Question

I am developing one node package myself to be able to publish it to node registry and i am using webpack for bundling using ES-6 syntax.

I am using css-loader in modules inside rules configuration provided by webpack, however i only need whole content of css and not anything else. So i have configured css-loader like this.

module.exports = {
  //devtool: 'source-map',
  plugins: [
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer']
    }),

  ],
  entry: {
    index: { import: './src/js/index.js', filename: "./js/[name].js" },
  },
  output: {
    path: path.resolve(__dirname, './dist/'),
    filename: "./js/[name].js",
  },

  stats: {
    errorDetails: true,
  },
  module: {
    rules: [
      {
        test: /\.html$/i,
        type: 'asset/source',
      },
      {
        test: /\.css$/i,
        use: [
          {
            loader: 'css-loader',
            options: {
              exportType: "css-style-sheet"
            }
          }
        ],

        //use: ["style-loader", "css-loader"],

      },

      {
        test: /\.(ttf|woff|woff2|eot|svg)$/,
        exclude: /node_modules/,
        include: [path.resolve(__dirname, "fonts")],
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name][ext]'
        }
      },
      {
        test: /\.(jpg|png|svg|gif)$/,
        exclude: /node_modules/,
        include: [path.resolve(__dirname, "images")],
        type: 'asset/resource',
        generator: {
          filename: 'images/[name][ext]'
        }
      },
    ]
  },
  snapshot: {
    managedPaths: [],
  }
}

and in the other javascript modules when i need css, i am importing them and processing for adding them to shadow dom. I am using exportType configuration of css-loader to be able to export as CSSStyleSheet object available in browser's document interface.

import mainSheet from '../dist/css/main.css' assert { type: 'css' };
import customSheet from '../dist/css/custom.css' assert { type: 'css' };

export default function(shadowRoot) {
    shadowRoot.adoptedStyleSheets = [mainSheet,customSheet];
}

This is all ok but once style has been processed and adopted by shadow dom i want to remove those styles from my bundle to reduce it;s size as there are almost more than half portion has been occupied by css itself thus making my main index.js file almost 6 MB.

I am also using html as an asset/source which does kind of same thing giving me the raw html from the file which i use as a component html.not sure if this is also present in js.

I have this question.

How to remove those other extra resources like css and html from the bundle after they are processed by the module and returned and successfully used where imported?

or is it that they will be always present in bundle as they are imported as a module and webpack creates seperate module (e.g. __webpack__module) inside bundled file to get them from that bundle?