webpack 多出口，怎么分离共享js?

Question

我使用webpack 写了一个多出口的项目，

vcard-view.js生成的代码里有import util from '../libs/util.js'
topbar.js生成的代码里也有import util from '../libs/util.js'

现在build 后，生成的vcard-view.js和topbar.js 都有util.js的内容

我的目标是vcard-view里有util.js，但是topbar.js里没有util.js

这个怎么操作？

意思是，vcard-view里，是一些公共组件，可以共用。
像poster,topbar是单独的组件，都要引用vcard-view里的组件

Answer 1

不知道你用的是webpack3还是webpack4
webpack3可以在entry里加额外的你想要抽取的引入

entries['vendors'] = ['jquery', './src/libs/common.js']
entries['common'] = ['./src/css/common.css']

webpack4配置optimization,例如我把vue，fastclick等第三方抽取成一个vendor.js

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