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')
    ]
}

这样的事情应该实现你的目标。它可能需要一些调整，但你应该能够隔离你想要的组件并提取它，同时保持捆绑所有常见的代码。