How to exclude some vuejs components from being compiled with webpack?

Question

I currently have a Laravel and Vuejs application in which I run the following commands when I need the build:

npm run dev
npm run watch
npm run production

It turns out that I compile everything found in

project/resources/assets/components/

Within the components folder there are multiple folders containing .vue and .ts files, each folder represents a system module.

However, I need to prevent certain system modules from being compiled, whose components and files are located in:

project/resources/assets/components/module1/
project/resources/assets/components/module2/

module1 and module2 are folders that contain multiple components and .ts files, since these files do not need to be executed in the compilation, so when executing any of the previous commands these files should not compile.

I will do this for a very specific requirement.

This is how I have my webpack.config.js:

const path = require("path");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
const BundleAnalyzerPlugin =
  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

const report = process.env.npm_config_report;
const time = process.env.npm_config_time;

let plugins = [
  new ForkTsCheckerWebpackPlugin({ typescript: { extensions: { vue: true } } }),
];

if (report) {
  plugins.push(
    new BundleAnalyzerPlugin({
      openAnalyzer: true,
    })
  );
}

let webpackConfig = {
  resolve: {
    extensions: [".js", ".vue", ".json", ".ts"],
    fallback: { path: require.resolve("path-browserify") },
    alias: {
      vue$: "vue/dist/vue.esm.js",
      src: path.join(__dirname, "resources/assets"),
      assets: path.join(__dirname, "resources/assets/assets"),
      components: path.join(__dirname, "resources/assets/components"),
      helpers: path.join(__dirname, "resources/assets/helpers"),
      pages: path.join(__dirname, "resources/assets/components/pages"),
      img: path.join(__dirname, "resources/assets/assets/img"),
      custom_fonts: path.join(
        __dirname,
        "resources/assets/assets/custom_fonts"
      ),
    },
    symlinks: false,
  },
  optimization: {
    splitChunks: {
      chunks: "all",
    },
    runtimeChunk: true,
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "ts-loader",
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/],
          transpileOnly: true,
        },
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
        exclude: path.resolve(
          __dirname,
          "resources/assets/components/module1"
        ),
      },
    ],
  },
  cache: true,
  plugins,
};

if (time) {
  const smp = new SpeedMeasurePlugin();
  webpackConfig = smp.wrap(webpackConfig);
}

module.exports = webpackConfig;

and like this the webpack.mix.js:

let mix = require("laravel-mix");
const config = require("./webpack.config");
/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

const report = process.env.npm_config_report;

mix.webpackConfig({
  ...config,
  output: {
    chunkFilename: mix.inProduction() ? "js/[id].[chunkhash].js" : "dev/js/[id].js",
  },
});

if (!report) {
  //hide chunk complete list
  mix.after((stats) => {
    stats.compilation.assets = {};
  });
}

mix
  .ts("resources/assets/main.ts", mix.inProduction() ? "public/" : "public/dev/")
  .vue({ version: 2 })
  .extract([
    "vue",
    "vuex",
    "vuex-persistedstate",
    "axios",
    "vue-router",
    "vue-form-wizard",
    "vue-sweetalert2",
    "vue-inputmask",
    "vue-data-tables",
    "vue-moment",
    "vue2-dropzone",
    "vue-html2canvas",
    "vuedraggable",
    "inputmask",
    "element-ui",
    "jspdf",
    "normalize.css",
    "v-money",
    "xlsx",
  ])
  .options({
    postCss: [require("autoprefixer")],
  });

if (mix.inProduction()) {
  mix.version();
} else {
  mix.override((webpackConfig) => {
    webpackConfig.devtool = "eval-cheap-source-map"; // Fastest for development
  });
}

// Disable all OS notifications
mix.disableNotifications();

I have tried applying this rule:

{
        test: /\.ts?$/,
        loader: "ts-loader",
        exclude: [
          /node_modules/,
          path.join(__dirname, "resources/assets/components/mvp/rules.ts"),
        ],
        options: {
          appendTsSuffixTo: [/\.vue$/],
          transpileOnly: true,
        },
      },

But even so, when I make a change in rules.ts it performs the compilation, that is, I have npm run watch executed, it makes a change in rules.ts and it automatically performs the compilation, which I don't need it to do.

I also tried this way with the vue-loader but when I make a change in the template of the component that I don't want it to compile it still compiles, this is how the rule remained:

{
 test: /\.vue$/,
 loader: "vue-loader",
 exclude: path.resolve(
              __dirname,
              "resources/assets/components/module1"
            ),
},