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

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