在使用webpack的图书馆输出时,我很难理解我做错了什么。
入口点如下:
entry: {
app1: './app1.js'
app2: './app2.js',
app3: './app3.js
vendor: [
'jQuery',
'moment'
],
vendorReact: [
'react',
'redux'
]
},
app1使用jquery和时刻。
app2使用jquery,moment,react,和redux。
app3使用jquery
我想要的是: 什么时候去app1。 index.html将是这样的:
script src vendor.js
script src commons.js //commons between app1.js and app2.js
script src app1.js
转到app2。 index.html将是这样的:
script src vendor.js
script src vendorReact.js
script src commons.js //commons between app1.js and app2.js
script src app2.js
转到app3。 index.html将是这样的:
script src app3.js
我的webpack.config.js看起来像:
'use strict';
var webpack = require('webpack');
module.exports = {
entry: {
app1: './app1.js',
app2: './app2.js',
app3: './app3.js',
vendor: [
'jquery',
'moment'
],
vendorReact: [
'react',
'redux'
]
},
output: {
path: __dirname + '/public/dist/js/',
filename: '[name].js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react'],
compact: false
}
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'commons',
chunks: ['app1', 'app2']
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
chunks: ['commons', 'app1', 'app2']
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendorReact',
chunks: ['commons', 'app1', 'app2']
})
]
};

期待结果:
vendor: -webpack runtime
-jQuery
-moment
vendorReact: -react
-redux
commons: commons file between app1 and app2
app1: app1 (without commons file between app1 and app2)
app2: app2 (without commons file between app1 and app2)
app3: -webpack runtime
-app3 (contains jQuery)
如果使用此练习示例github:https://github.com/webpack/webpack/tree/master/examples/two-explicit-vendor-chunks
app3中的jquery插件也转移到了供应商。而且我不想那样。
我在这里缺少什么?