Vue.js和Webpack，如何构建组件以实现可移植性

Question

假设我有2个Vue.js应用程序：app1和app2。

两者都实现单个文件组件方法，并由webpack内置到各自的/dist/build.js中。

现在，我需要在app2中使用在app1内部开发的组件，所以我想知道：有没有一种方法可以指示webpack不要将整个app1都构建到单个/dist/build.js中，而是产生N个不同的“构建” js文件来分离可重复使用的组件，以便我可以例如使用app1 / dist / components.build.js并以某种方式直接导入到app2中，而无需在其中临时复制.vue文件？

我对Vue和Webpack还是很陌生，所以我什至不确定这个问题是否完全有意义。

Answer 1

Webpack支持代码拆分，实际上是它必须提供的更酷的功能之一。

您的webpack配置看起来像这样：

module.exports = {
    entry: {
        app1: 'path/to/app1/dir',
        app2: 'path/to/app2/dir/excluding/chunked/component',
        app3: 'path/to/app2/chunked/component',
    },
    plugins: [
        new HtmlWebpackPlugin({ title: 'Code Split' }),
        new webpack.optimize.CommonsChunkPlugin({
           name: 'common' // Specify name for your common app modules 
                          // i.e vendors, etc.
        })
    ],
    output: [
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    ]
}

这样的事情应该可以实现您的目标。 它可能需要一些调整，但是您应该能够隔离所需的组件并提取它，同时将所有通用代码捆绑在一起。