WebpackコードをlibraryTargetで分割する

Question

私はWebアプリケーションを持っています。（クライアント側）javacriptは、メインエントリーポイントがapp.jsであるes6で書かれています。

jQueryのようなベンダーライブラリを外部から参照するか、バンドルに組み込むことができます（好みによってはwebpackを使用してバンドルできます）。それは、ブラウザで正しく動作させるためには、私はそうのようlibraryTargetとlibraryを指定する必要があります。

//snip 
entry: { 
    "app.bundle": ["./app.js"], 
}, 
output: { 
    path: path.join(__dirname, "wwwroot\\js"), 
    filename: "[name].js", 
    libraryTarget: "var", 
    library: "app" 
} 
//snip 

は、しかし、私は私のベンダーライブラリが別途同梱持ってよう を思います。

これはCommonsChunkPluginを使って行うことができますが、library*のプロパティでもうまく動作しないようです。すなわち、私は最終的にの代わりにapp.jQueryになります。

私のベンダーコードを分けて、アプリケーションコードをブラウザに正しく公開しながら適切なグローバルを提供するにはどうしたらいいですか？

ここ

webpack.config：

var path = require('path'), 
    webpack = require('webpack'); 

module.exports = { 
    context: path.join(__dirname, 'wwwroot'), 
    entry: { 
     "app.bundle": ['./js/app.js'], 
     "vendor.bundle": ['jquery', 'jquery-validation', 'jquery-validation-unobtrusive'] 
    }, 
    output: { 
     path: path.join(__dirname, 'wwwroot\\js'), 
     filename: '[name].js', 
     libraryTarget: 'var', 
     library: 'app' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /.jsx?$/, 
       loader: 'babel-loader', 
       exclude: /node_modules/, 
       query: { 
        presets: ['es2015', 'stage-0'] 
       } 
      } 
     ] 
    }, 
    resolve: { 
     extensions: ['*', '.js'] 
    }, 
    plugins: [ 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'vendor.bundle', 
      minChunks: Infinity 
     }), 
     new webpack.ProvidePlugin({ 
      $: 'jquery', 
      jQuery: 'jquery' 
     }) 
    ] 
} 

Answer 1

あなたのjqueryのプラグインが外部に提供され、あなたがライブラリを開発している場合、私はexternalsの代わりProvidePluginを使用することをお勧めしたいです。つまり、バンドルされたライブラリをテストするときにjQueryを明示的に提供する必要があります。あなたがバンドルされたライブラリをテスト

外観

externals: { 
    $: require.resolve('jquery'), 
    'window.$': require.resolve('jquery') 
    // ... and so on 
} 

そして、あなたの index.htmlは私の何かのようになります：

<script src='jquery.min.js'></script> 
<script src='myLibrary.min.js'></script>