Vue.jsとWebpack、移植性のためのコンポーネントを構築する方法

Question

私は2つのVue.jsアプリを持っているとしましょう：app1とapp2。

どちらも、単一のファイルコンポーネントアプローチを実装しており、webpackによってそれぞれの/dist/build.jsに組み込まれています。

私は、app1の内部で開発されたコンポーネントをapp2で使用する必要があります。そのため、webpackにapp1全体を/dist/build.jsにまとめないように指示する方法はありますか？代わりに再利用可能なコンポーネントを分離するためにN個の異なる "ビルド" jsファイルを生成します。たとえば、app1/dist/components.build.jsをとり、.vueファイルをphisicallyコピーせずにapp2に直接インポートしますそこで？

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

何かがあなたの目標を達成する必要があります。ちょっと微調整する必要があるかもしれませんが、必要なコンポーネントを分離して抽出し、すべての共通コードをバンドルしておく必要があります。