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
};