1. 20
    Grouping vendor files with the Webpack CommonsChunkPlugin
    5m 36s

Grouping vendor files with the Webpack CommonsChunkPlugin

Share this video with your friends

Send Tweet

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).

Francisco
Francisco
~ 8 years ago

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

hipertracker
hipertracker
~ 8 years ago

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),
  }
}
hipertracker
hipertracker
~ 8 years ago

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

  }
}
Kent C. Dodds
Kent C. Dodds(instructor)
~ 8 years ago

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

Kent C. Dodds
Kent C. Dodds(instructor)
~ 8 years ago

Thanks for sharing!

Dean
Dean
~ 8 years ago

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!

Kent C. Dodds
Kent C. Dodds(instructor)
~ 8 years ago

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.

Dean
Dean
~ 8 years ago

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