的WebPack - 分割文件，並創建2束

Question

我嘗試使用的WebPack

簡要

實現以下目標我有2個入口點：

App.js和App2。 JS

App1.js具有App1def.js 依賴性App2.js具有依賴性與App2def0x.js文件 Cats.js用於通過App1.js和App2.js

所有appx.js文件都還使用jQuery依賴和巴貝爾，填充工具

我想編譯：

• Vendor.min.js contaning jQuery的，巴貝爾，填充工具（墊片）
• Common.min.js方含Cats.js（由appx.js使用的公共文件）
• App1.boundle.js含有app1def.js
• 含有App2.boundle.js app2def01.js app2def02.js

我的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"] 
    }), 

    ] 
}; 

完整的項目是在這裏：https://github.com/mydiscogr/webpack-babel-config/

Answer 1

你可以試試這個？

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 
    }) 
] 

讓我知道，如果它