Webpack has multiple exits, how to separate and share js?

I wrote a multi-exit project using webpack,

clipboard.png

clipboard.png

clipboard.png

clipboard.png

vcard-view.js generated code has import util from". / libs/util.js"
topbar.js generated code also has import util from". / libs/util.js"

now after build, vcard-view.js and topbar.js both have util.js content

.

my goal is util.js in vcard-view , but not util.js

in topbar.js .

how do you do this?

means that vcard-view are common components that can be shared.
like poster , topbar are separate components, and they all refer to vcard-view components

.
May.09,2022

I don't know if you are using webpack3 or webpack4
webpack3 can add extra import to entry that you want to extract

optimization: {
    runtimeChunk: {
      name: 'manifest'
    },
    splitChunks: {
      maxInitialRequests: 10,
      cacheGroups: {
        vendor: {
          test: /(jquery|fastclick|vue.esm.js)/,
          name: 'vendor',
          chunks: 'all'
        },
        common: {
          test: /(\.(png|jpe?g|gif|svg))/,
          name: 'app',
          chunks: 'initial',
          minChunks: 10
        }
      }
    }
  },
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3e5ab-2c41d.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3e5ab-2c41d.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?