Not emitting CSS background images from package

[KevinBerthier]

Expected Behavior

Should emit background images from 'flag-icon-css' package

Actual Behavior

Is it possible to exclude this package from caching ? See my try below , not working

environment.plugins.prepend(
  'HardSourceWebpackExcludeModulePlugin',
  new HardSourceWebpackPlugin.ExcludeModulePlugin([
    { test: /mini-css-extract-plugin[\\/]dist[\\/]loader/ },
    { test: /flag-icon-css[\\/]css[\\/]flag-icon/ }
  ])
)

Is an error being thrown? No

Steps to Reproduce

components/FlagIcon.vue

<template>
  <span v-if="iso" :class="flagIconClass" :title="title || iso" class="border-1 border-ultra-light"></span>
</template>
<script>
import 'flag-icon-css/css/flag-icon.css'
export default {
  props: {
    iso: { type: String, default: null },
    title: { type: String, default: null },
    squared: { type: Boolean, default: true },
    rounded: { type: Boolean, default: false }
  },
  computed: {
    flagIconClass() {
      return (
        (this.rounded ? 'flag-icon-background ' : 'flag-icon ') +
        (this.rounded ? 'flag-icon-rounded ' : '') +
        (this.squared ? 'flag-icon-squared ' : '') +
        `flag-icon-${this.iso.toLowerCase()}`
      )
    }
  }
}
</script>

config/environment.js (webpacker)

const { environment } = require('@rails/webpacker')
const { VueLoaderPlugin } = require('vue-loader')
const vue = require('./loaders/vue')
const webpack = require('webpack')

// environment.splitChunks()

environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
environment.loaders.prepend('vue', vue)

environment.plugins.append(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Tether: 'tether'
  })
)

environment.loaders.delete('nodeModules')

// Caching
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
environment.plugins.prepend(
  'HardSourceWebpackExcludeModulePlugin',
  new HardSourceWebpackPlugin.ExcludeModulePlugin([
    { test: /mini-css-extract-plugin[\\/]dist[\\/]loader/ },
    { test: /flag-icon-css[\\/]css[\\/]flag-icon/ }
  ])
)
environment.plugins.prepend('HardSourceWebpackPlugin', new HardSourceWebpackPlugin())
module.exports = environment

Operating System, Node, and NPM dependency versions

Mac OS 10.11.6
Node 12.16

"dependencies": {
    "@codeur/topbar": "^1.0.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.31",
    "@fortawesome/free-brands-svg-icons": "^5.15.0",
    "@fortawesome/pro-light-svg-icons": "^5.15.0",
    "@fortawesome/pro-regular-svg-icons": "^5.15.0",
    "@fortawesome/pro-solid-svg-icons": "^5.15.0",
    "@fortawesome/vue-fontawesome": "^2.0.0",
    "@joeattardi/emoji-button": "^3.0.3",
    "@rails/actioncable": "6.0.3-3",
    "@rails/activestorage": "6.0.3-3",
    "@rails/ujs": "6.0.3-3",
    "@rails/webpacker": "5.2.1",
    "@sentry/browser": "^5.15.5",
    "@tanem/svg-injector": "^8.0.51",
    "ace-builds": "^1.4.5",
    "autosize": "^4.0.2",
    "babel-plugin-lodash": "^3.3.4",
    "bootstrap": "^4.5.2",
    "bootstrap-vue": "^2.17.3",
    "braintree-web": "^3.67.0",
    "chart.js": "^2.8.0",
    "chartjs-plugin-colorschemes": "^0.4.0",
    "cleave.js": "^1.6.0",
    "clipboard": "^2.0.4",
    "color": "^3.0.0",
    "date-fns": "^2.16.1",
    "dotenv": "^8.2.0",
    "dropzone": "^5.7.0",
    "es6-promise": "^4.2.8",
    "exports-loader": "^0.7.0",
    "fancybox": "^2.1.8",
    "fastify": "^2.13.0",
    "file-loader": "^4.0.0",
    "flag-icon-css": "^2.9.0",
    "hard-source-webpack-plugin": "^0.13.1",
    "hoverintent": "^2.2.0",
    "intl-tel-input": "^15.1.2",
    "isomorphic-fetch": "^2.2.1",
    "jquery": "^3.5.1",
    "jquery-expander": "^1.7.0",
    "jquery-form": "^4.2.2",
    "jquery-ui": "^1.12.1",
    "jquery-ujs": "^1.2.2",
    "jquery-validation": "^1.19.1",
    "js-cookie": "^2.2.0",
    "lodash": "^4.17.20",
    "mjml": "^4.5.1",
    "paypal-checkout": "^4.0.195",
    "pm2": "^4.2.3",
    "popper.js": "^1.16.1",
    "portal-vue": "^2.1.7",
    "prismjs": "^1.21.0",
    "progressbar.js": "^1.0.1",
    "scrollmagic": "^2.0.7",
    "semantic-ui-dropdown": "2.2.12",
    "semantic-ui-rating": "^2.3.1",
    "semantic-ui-transition": "^2.3.1",
    "snakecase-keys": "^3.2.0",
    "svgo": "^1.0.0",
    "terser-webpack-plugin": "^4.2.3",
    "tether": "^1.4.6",
    "text-to-svg": "^3.1.5",
    "turbolinks": "^5.2.0",
    "vue": "^2.6.12",
    "vue-click-outside": "^1.1.0",
    "vue-i18n": "^8.21.1",
    "vue-infinite-loading": "^2.4.5",
    "vue-loader": "^15.9.3",
    "vue-multiselect": "^2.1.6",
    "vue-prism-component": "^1.2.0",
    "vue-radial-progress": "^0.3.2",
    "vue-resource": "^1.5.1",
    "vue-router": "^3.4.3",
    "vue-tel-input": "^4.4.0",
    "vue-template-compiler": "^2.6.12",
    "vue-turbolinks": "^2.1.0",
    "vuex": "^3.5.1",
    "zoom-vanilla.js": "^2.0.6"
  },
  "version": "0.1.0",
  "devDependencies": {
    "babel-eslint": "^10.1.0",
    "eslint": "^7.11.0",
    "eslint-config-prettier": "^6.12.0",
    "eslint-config-standard": "^14.1.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier-vue": "^2.1.1",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1",
    "eslint-plugin-vue": "^7.0.1",
    "prettier": "^2.1.2",
    "webpack-bundle-analyzer": "^3.9.0",
    "webpack-dev-server": "^3.11.0"
  },
  "resolutions": {
    "eslint-plugin-prettier-vue/vue-template-compiler": "^2.6.12",
    "@rails/webpacker/terser-webpack-plugin": "^4.2.3"
  },