webpack - splitting files and create 2 bundle

Question

I'm try to achieve the following target using webpack

in brief I have 2 entry point:

App.js and 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

all appx.js files have also a dependency with Jquery and babel-polyfill

I'd like to compile in:

Vendor.min.js contaning jquery, babel-polyfill (shim)
Common.min.js containg Cats.js (the common file used by appx.js)
App1.boundle.js containing app1def.js
App2.boundle.js containing app2def01.js app2def02.js

my webpack config is here:

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/

Darwin Cahyadi Darwin Cahyadi · Accepted Answer · 2016-11-27T11:37:32

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

webpack - splitting files and create 2 bundle

1 Answers