How to bundle vendor scripts separately and require them as needed with Webpack? #1087

Activity

1. margielm commented on May 20, 2015

   

   margielm

   on May 20, 2015

   More actions

   I don't consider myself webpack-expert. but I tried to do my best to help you.
2. bebraw

   added

   question

   on Nov 14, 2015
3. bebraw commented on Nov 14, 2015

   

   bebraw

   on Nov 14, 2015

   Contributor

   More actions

   @bensampaio Did you figure this out?
4. bensampaio commented on Nov 21, 2015

   

   bensampaio

   on Nov 21, 2015

   Author

   More actions

   @bebraw In the end I decided to keep doing it as before... I use webpack for my own scripts, and I merge all vendor scripts into one even if some of them are not used. I don't like it, but it works... I tried to create a loader to just grab all required vendor scripts and merge them in a file by keeping global variables, but it had some problems with the order files were being loaded and written. I ended up giving up because it was consuming too much time. If you want to have a look you can find it here: https://github.com/bensampaio/webpack-globals-loader.
5. Freezystem commented on Apr 19, 2016

   

   Freezystem

   on Apr 19, 2016

   Last edited by Freezystem

   More actions

   In case you're interested in bundling automatically your scripts separately from vendors ones:

   var webpack = require('webpack'),
       pkg     = require('./package.json'),  //loads npm config file
       html    = require('html-webpack-plugin');
   
   module.exports = {
     context : __dirname + '/app',
     entry   : {
       app     : __dirname + '/app/index.js',
       vendor  : Object.keys(pkg.dependencies) //get npm vendors deps from config
     },
     output  : {
       path      : __dirname + '/dist',
       filename  : 'app.min-[hash:6].js'
     },
     plugins: [
       new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.min-[hash:6].js'),
       new html({template : __dirname + '/app/index.html'})
     ]
   };

   You can read more about this feature in official documentation.

   👍React with 👍8Reacted by Hans Henrik Petersen, Kiswendsida Kikone, Kyle Wascher, Julio C Vila, Robert Eles, Dani de la Cruz, Derek Shang and haoran
6. KongMac commented on Apr 19, 2016

   

   KongMac

   on Apr 19, 2016

   Last edited by KongMac

   More actions

   You can put the vendor scripts into the other folder,not in the entry folders.you just use "require (XX)"in the entry file,and then you make it.
7. bebraw

   closed this as completedon Dec 24, 2016