Webpack on project dependency

[felipe-chamas]

I'm very new to Webpack and I saw a great improvement in one of my projects with Lazy-Loading and Code Splitting, but I'm facing a dificulty on implementing this project as a dependency of another project.
I'm trying to use Webpack on both, but when serving the main project, the dependencies chunks of the dependency project are missing.

Dependency project webpack.config.js

/* eslint-disable @typescript-eslint/no-var-requires */
const path = require('path')
const TerserPlugin = require('terser-webpack-plugin')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

const analyze = false

const plugins = () => {
  const pluginsList = []

  if (analyze) {
    pluginsList.push(new BundleAnalyzerPlugin())
  }

  return pluginsList
}

module.exports = (env, argv) => {
  const { mode } = argv

  return {
    entry: path.resolve(
      __dirname,
      'src',
      mode === 'production' ? 'lib.ts' : 'index.tsx'
    ),
    devServer: {
      contentBase: path.resolve(__dirname, 'public'),
    },
    optimization: {
      minimize: mode === 'production',
      minimizer: [new TerserPlugin()],
    },
    output: {
      path: path.resolve(
        __dirname,
        mode === 'production' ? 'dist' : 'public/dist'
      ),
      chunkFilename: '[name].[contenthash].js',
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-env',
                '@babel/preset-react',
                '@babel/preset-typescript',
              ],
              plugins: [
                ['@babel/plugin-proposal-class-properties'],
                ['@babel/plugin-transform-react-jsx'],
              ],
            },
          },
        },
        {
          test: /\.(gif|png|jpe?g|svg)$/i,
          use: [
            {
              loader: 'file-loader',
            },
            {
              loader: 'image-webpack-loader',
              options: {
                jpegtran: {},
                optipng: {},
                svgo: {
                  removeViewBox: false,
                },
              },
            },
          ],
        },
      ],
    },
    resolve: {
      extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
      alias: {
        React: path.resolve(__dirname, './node_modules/react/'),
        ReactDOM: path.resolve(__dirname, './node_modules/react-dom/'),
        '@': path.resolve('src'),
      },
    },
    plugins: plugins(),
  }
}

Main project webpack.config.json

/* eslint-disable @typescript-eslint/explicit-function-return-type */
/* eslint-disable @typescript-eslint/no-var-requires */
const path = require('path')
const TerserPlugin = require('terser-webpack-plugin')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

const analyze = true

const plugins = () => {
  const pluginsList = []

  if (analyze) {
    pluginsList.push(new BundleAnalyzerPlugin())
  }

  return pluginsList
}

module.exports = (env, argv) => {
  const { mode } = argv

  return {
    entry: path.resolve(__dirname, 'src', 'index.ts'),
    devServer: {
      contentBase: path.resolve(__dirname, 'public'),
    },
    optimization: {
      minimize: mode === 'production',
      minimizer: [new TerserPlugin()],
    },
    output: {
      path: path.resolve(
        __dirname,
        mode === 'production' ? 'dist' : 'public/dist'
      ),
      chunkFilename: '[name].[contenthash].js',
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-env',
                '@babel/preset-react',
                '@babel/preset-typescript',
              ],
              plugins: [
                ['@babel/plugin-proposal-class-properties'],
                ['@babel/plugin-transform-react-jsx'],
                ['@babel/plugin-transform-runtime'],
              ],
            },
          },
        },
        {
          test: /\.(gif|png|jpe?g|svg)$/i,
          use: [
            {
              loader: 'file-loader',
            },
            {
              loader: 'image-webpack-loader',
              options: {
                jpegtran: {},
                optipng: {},
                svgo: {
                  removeViewBox: false,
                },
              },
            },
          ],
        },
        {
          test: /\.css$/i,
          use: ['style-loader', 'css-loader'],
        },
      ],
    },
    resolve: {
      extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
      alias: {
        React: path.resolve(__dirname, './node_modules/react/'),
        ReactDOM: path.resolve(__dirname, './node_modules/react-dom/'),
        'dependency-project': path.resolve(
          __dirname,
          './node_modules/dependency-project'
        ),
        '@': path.resolve('src'),
      },
      fallback: {
        crypto: require.resolve('crypto-browserify'),
        stream: require.resolve('stream-browserify'),
      },
    },
    plugins: plugins(),
  }
}

webpack serve -> Cannot GET /758.js (Dependency of dependency-project)

Is there anything wrong with my settings?

[alexander-akait]

Can you provide simple example?

[felipe-chamas]

I'm sorry, I was trying to build a Library using code splitting. I believe I understood the correct way of implementing in order to make tree-shaking when the lib is imported by the main project.