私は、(クライアント側) JavaScript が es6 で書かれており、メイン エントリ ポイントが にある Web アプリケーションを持っていますapp.js
。
好みに応じて、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
はただの代わりに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'
})
]
}