當(dāng)我們在開發(fā)Vue應(yīng)用時，通常會有一些公共模塊需要被打包在一起，以便在不同的組件中共享。

Vue提供了一個非常方便的方式來實現(xiàn)這一功能，我們可以使用Webpack來打包我們的公共模塊。

首先，在我們的Vue項目中，我們需要創(chuàng)建一個名為“common”的文件夾，用來存放我們的公共模塊。

src/
├── common/
├── components/
├── router/
├── views/
├── App.vue
└── main.js

在common文件夾中，我們可以創(chuàng)建一個名為“index.js”的文件，作為我們的公共模塊入口文件。

common/
├── index.js
└── ...

在“index.js”中，我們可以寫入我們想要導(dǎo)出的模塊。例如，我們可以導(dǎo)出一個全局的Vue實例來共享在不同的組件之間。

import Vue from 'vue'
export const EventBus = new Vue()

現(xiàn)在，我們已經(jīng)有了我們的公共模塊，我們需要將它們打包在一起。

首先，我們需要在我們的“webpack.config.js”文件中配置我們的入口文件。

module.exports = {
entry: {
app: './src/main.js',
common: './src/common/index.js'
},
...
}

接著，我們需要在我們的HTML文件中添加我們的公共模塊的引用。

最后，在我們的命令行中，使用“webpack”命令進行打包，我們將獲得兩個打包好的“js”文件，分別為“common.bundle.js”和“app.bundle.js”。

現(xiàn)在，我們已經(jīng)成功地打包了我們的公共模塊，并可以在不同的組件之間共享它們。