Webpack 2：ビルドマルチパートライブラリと外部としての使用

Question

私はWebpack 2を使用しており、私の会社のいくつかのプロジェクトで使用される共通ライブラリをバンドルしようとしています。依存関係には、vue、vue-routerなどがあります。これらのベンダー依存関係を単一の共通ファイルにパッケージ化し、それをさまざまなプロジェクトによって外部として組み込むことは意味があるようです。しかし、私はこれを動作させるように見えることはできません。

マイライブラリwebpack.config.jsは、行が含まれています。

entry: { 
    common: [ 
     'vue', 
     'vue-router' 
    ] 
} 
... 
output: { 
    filename: '[name].js', 
    libraryTarget: 'var' 
} 

マイ消費プロジェクトのwebpack.config.jsが含まれています：

externals: { 
    'vue': 'Vue', 
    'vue-router': 'VueRouter' 
} 

私は commonに共通に output.libraryを設定しようとした

と例えば、['common','Vue']のようになる。これは機能しません。

私は"amd"にライブラリと消費者の両方にlibraryTargetを設定しようとした、そしてそれはちょうど、未定義であることdefineになります。 "var"を使用すると、ライブラリが1つしかラップされていない場合は、commonにライブラリがラップされます。複数ラップすると、両方が定義されません。

私がしようとしていることは可能ですか？ありがとう。

Answer 1

私が理解するように、あなたは外部（上記のように）を使用する必要があります。それだけです。

そして、外部の依存関係をスクリプトタグ（例：https://unpkg.com/vue@2.2.6/dist/vue.runtime.min.js）またはnpmから "es5 way"で取得して使用することができます。または、必要に応じて* .jsファイルに保存します。

Webpackは、モジュール（たとえばes 2015）またはグローバル変数（es5）からの依存関係を取得するバンドルを作成します。

したがって、外部ライブラリのバンドルはすでにnpmに存在します。