just take this index.js:

import _ from 'lodash';
import Swiper from 'swiper';
import { Fancybox, Carousel, Panzoom } from "@fancyapps/ui";

console.log('from index');
//console.log(Swiper);
console.log(Fancybox, Carousel, Panzoom);
console.log(_);

Swiper is not used, so if I correctly understand, should not be included in production code. Instead, I can find it on the bundle (visuals.js, see below). Why?

Following, is my current webpack test config:

const path = require('path');

module.exports = {
  //mode: 'development',
  mode: 'production',
  watch: true,
  entry: {
    index: './src/index.js',
  },

  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },

  optimization: {
    splitChunks: {
      cacheGroups: {
        visuals: {
          name: 'visuals',
          chunks: 'all',
          test: /[\\/]node_modules[\\/](swiper|@fancyapps\/ui|dom7|ssr-window)[\\/]/
        },
        lowdash: {
          name: 'lowdash',
          chunks: 'all',
          test: /[\\/]node_modules[\\/]lodash[\\/]/
        }
      },
    }
  },

  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: { presets: ['@babel/preset-env'] }
        }
      } // babel
    ] // rules
  } // module
};