Grouping vendor files with the Webpack CommonsChunkPlugin

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

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

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

  }
}

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

Thanks for sharing!

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!

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.

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