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

帅动的笑脸
  • 17

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

clipboard.png

clipboard.png

clipboard.png

clipboard.png

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

现在build 后,生成的vcard-view.jstopbar.js 都有util.js的内容

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

这个怎么操作?

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

回复
阅读 1k
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
        }
      }
    }
  },
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏