The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Grouping vendor files with the Webpack CommonsChunkPlugin

Grouping vendor files with the Webpack CommonsChunkPlugin

5:36
Often, you have dependencies which you rarely change. In these cases, you can leverage the CommonsChunkPlugin to automatically put these modules in a separate bundled file so they can be cached and loaded separately from the rest of your code (leveraging the browser cache much more effectively).
Watch this lesson now
Avatar
egghead.io

Often, you have dependencies which you rarely change. In these cases, you can leverage the CommonsChunkPlugin to automatically put these modules in a separate bundled file so they can be cached and loaded separately from the rest of your code (leveraging the browser cache much more effectively).

Avatar
Marc

Realistically, the vendors files will change from time to time, so I expect hashing should be used there too.

In reply to egghead.io
Avatar
Rob

Would it be a bad idea to set it up so that the strings inside of the vendor array are dynamically generated by parsing the package.json's dependencies and grabbing the keys? That way all vendor dependencies are automatically put in the vendor bundle?

In reply to egghead.io
Avatar
Francisco

I believe there is a spelling error when you added a entry on webpack config file. You wrote "vender" instead of "vendor"

Avatar
hipertracker

How to use it together with HtmlWebpackPlugin and chunkhash? In my settings index.html has injected only vendor file

const webpack = require('webpack')
const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

//const isProd = process.env.NODE_ENV === 'production'
const isTest = process.env.NODE_ENV === 'test'

module.exports = env => {
  return {
    entry: {
      app: './js/app.js',
      vendor: ['lodash', 'jquery'],
    },
    output: {
      filename: 'bundle.[name].[chunkhash].js',
      path: resolve(__dirname, 'priv/static'),
      pathinfo: true, //!env.prod,
    },
    context: resolve(__dirname, 'web/static'),
    devtool: env.prod ? 'source-map' : 'eval',
    bail: env.prod,
    module: {
      loaders: [
        {test: /\.js$/, loader: 'babel!eslint', exclude: /node_modules/},
        {test: /\.css$/, loader: 'style!css'},
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './index.html'
      }),
      isTest ? undefined : new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
      })
    ].filter(p => !!p),
  }
}
Avatar
hipertracker

Found solution a minute later :) I don't need to add [chunkhash] to output filename. I need to add hash: true to HtmlWebpackPlugin.

// ...
    output: {
      filename: 'bundle.[name].js',
      path: resolve(__dirname, 'priv/static'),
      pathinfo: !env.prod,
    },
    // ...
    plugins: [
      new HtmlWebpackPlugin({
        template: './index.html',
        hash: true
      }),

  }
}
In reply to hipertracker
Avatar
Kent C.

Good catch Francisco! I looked into it and wrote you (and several others) an explanation of my blunder!

In reply to Francisco
Avatar
Kent C.

Absolutely, and I mention this in another lesson. I was going for isolated lessons in this course, for more info, see this blogpost.

In reply to Marc
Avatar
Kent C.

Not a terrible idea, though you'd probably want to measure the effect. It really just depends on your specific situation, but dynamically creating the vendor bundle isn't a bad idea IMO :-)

In reply to Rob
Avatar
Kent C.

Thanks for sharing!

In reply to hipertracker
Avatar
Rajeev

I have a ApiCaller js module which generate calls to our api server for data. It has const field APIURL which points to server url. This APIURL const changes for dev and prod environments. So when I need to deploy to dev I need to change that url and vice-versa.

I want these configuration parameters outside the code and during build process I change them dynamically so that we can build with different settings.
Is that possible in webpack?

In reply to egghead.io
Avatar
Kent C.

This is definitely possible. I know that many people do this kind of thing. There are a few approaches. I recommend you formulate a bigger example of your use case in the form of a Stack Overflow question. You'll likely get some good recommendations.

In reply to Rajeev
Avatar
Dean

Hey - when looking at your git, I am curious about the following.

In your app.js file, you reference jquery.
const $ = ....

But in your seperate files, you are brining in lodash via method incantation.

Why not also just include it in your app.js like you did with jquery?

const $ = ...
const _ =

I ask because i want to make sure I understand the thought process and I don't implement inappropriate things. I would have included it in the app.js file. Let me know - thanks!

Avatar
Kent C.

I'm not sure where you're talking about to be honest. But normally yes, you'll want to explicitly require/import dependencies. I rarely (hardly ever/never) reference global variables in my apps these days, even for major libraries/frameworks.

In reply to Dean
Avatar
Dean

Hey hipertracker, what does your index.html file look like? I am confused as to the implementation using HtmlWebpackPlugin.

In reply to hipertracker
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?