[英]webpack - splitting files and create 2 bundle
I'm try to achieve the following target using webpack 我尝试使用webpack实现以下目标
in brief I have 2 entry point: 简而言之,我有2个切入点:
App.js and App2.js App.js和App2.js
App1.js have a dependency with App1def.js App2.js have dependency with App2def0x.js files Cats.js is used by App1.js and App2.js App1.js与App1def.js有依赖关系App2.js与App2def0x.js文件有依赖关系Apps.js和App2.js使用Cats.js
all appx.js files have also a dependency with Jquery and babel-polyfill 所有appx.js文件都依赖于Jquery和babel-polyfill
I'd like to compile in: 我想编译:
my webpack config is here: 我的webpack配置在这里:
var webpack = require("webpack");
const createVendorChunk = require('webpack-create-vendor-chunk');
module.exports = {
entry: {
app:"./src/js/app.js",
app2:"./src/js/app2.js"
},
output: {
path: './bin',
filename:"[name].bundle.js",
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}]
},
resolve: {
extensions: ['', '.js', '.es6']
},
plugins: [
/*
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
filename: "vendor.min.js",
minChunks: Infinity
})
*/
createVendorChunk({
name:"vendor.min.js"
}),
createVendorChunk({
name:"common.min.js",
chunks:["common"]
}),
]
};
complete project is here : https://github.com/mydiscogr/webpack-babel-config/ 完整的项目在这里: https : //github.com/mydiscogr/webpack-babel-config/
can you try this? 你能试试吗?
entry: {
app:"./src/js/app.js",
app2:"./src/js/app2.js"
vendor: [
'jquery',
'moment',
'lodash',
'some other vendor'
]
},
output: {
path: './bin',
filename:"[name].bundle.js",
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}]
},
resolve: {
extensions: ['', '.js', '.es6']
},
plugins: [
// it moves cat.js to common.js
new webpack.optimize.CommonsChunkPlugin({
name: 'Common',
chunks: ['App1', 'App2']
}),
// some third party libraries (eg: jquery, moment) when used in App1, App2, and Common moves to vendor.js
new webpack.optimize.CommonsChunkPlugin({
name: 'Vendor',
minChunks: Infinity
}
// Just Other Tricks!!
// Delete 2 CommonsChunkPlugin option above and add this
new webpack.optimize.CommonsChunkPlugin({
// The order of this array matters
names: ['Common', 'Vendor'],
minChunks: 2
})
]
let me know if it works 让我知道它是否有效
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.