I have made a package to use in another project. Previously this was transpiled with babel and nothing was bundled. The other application would install it as a npm package and that project would bundle everything. It worked fine.

I'm now bundling the package with Webpack to handle some tree shaking. The project includes several json files, these get chunked into their own files, or I can use a plugin to store them as json files. Everything works fine, I add it to my main project which uses this package, and when it loads it only loads the index.js, none of the chunked files are added to the main projects bundle. Is it possible to do this?

Here is my webpack.config.js

module.exports = {
  entry: './src/index.tsx',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: [/node_modules/, /\.json$/],
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },

  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    symlinks: false,
  },
  output: {
    clean: true,
    path: path.resolve(__dirname, 'dist'),
    chunkFilename: '[id].js',
    publicPath: '/',
    filename: 'index.js',
    library: {
      name: 'dummyName',
      type: 'umd',
    },
  },
  mode: 'production',
  externals: {
    react: 'react',
    'react-dom': 'react-dom',
    '@mui/material': '@mui/material',
    '@mui/styles': '@mui/styles',
  },
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: './src/assets', to: 'assets' },
      ],
    }),
    new BundleAnalyzerPlugin({ analyzerMode: 'disabled' }),
  ],
};

How can I do this?