title: Cannot read property 'packery' of undefined` when using Isotope and Webpack
body: <p>I'm trying to use the packery layout mode in Isotope with webpack.</p>
  
  <p>Current setup:</p>
  
  <ul>
  <li>jQuery version that comes with Wordpress</li>
  <li>Coffeescript</li>
  <li>Modified <a href="https://github.com/vigetlabs/gulp-starter" rel="nofollow noreferrer">Gulp Starter</a></li>
  </ul>
  
  <p>Here's the file where I'm calling the packery layout of isotope.</p>
  
  <pre><code>Isotope = require 'isotope-packery'
  
  iso = new Isotope '.js-isotope',
    # main isotope options
    itemSelector: '.js-isotope__item'
    # set layoutMode
    layoutMode: 'packery'
    packery:
      gutter: 10
  </code></pre>
  
  <p>I keep getting the error <code>Uncaught TypeError: Cannot read property 'packery' of undefined</code>. Here's the full console and reference in the file.</p>
  
  <p><a href="https://i.stack.imgur.com/JN9GK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JN9GK.png" alt="enter image description here"></a></p>
  
  <p>I'm new to Webpack / requiring modules so I may be missing something obvious.</p>
  
  <p>Here's my webpack config file:</p>
  
  <pre><code>var config = require('../config')
  if(!config.tasks.js) return
  
  var path            = require('path')
  var webpack         = require('webpack')
  var webpackManifest = require('./webpackManifest')
  
  module.exports = function(env) {
    var jsSrc = path.resolve(config.root.src, config.tasks.js.src)
    var jsDest = path.resolve(config.root.dest, config.tasks.js.dest)
    var publicPath = path.join(config.tasks.js.dest, '/')
    var filenamePattern = env === 'production' ? '[name]-[hash].js' : '[name].js'
    var extensions = config.tasks.js.extensions.map(function(extension) {
      return '.' + extension
    })
  
    var webpackConfig = {
      externals: {
        // require("jquery") is external and available
        //  on the global var jQuery
        "jquery": "jQuery"
      },
      context: jsSrc,
      plugins: [
        new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery",
          "window.jQuery": "jquery"
        })
      ],
      resolve: {
        root: jsSrc,
        extensions: [''].concat(extensions)
      },
      module: {
        loaders: [
          {
            test: /\.js$/,
            loader: 'babel-loader?stage=1',
            exclude: /node_modules/
          },
          {
            test: /isotope\-|fizzy\-ui\-utils|desandro\-|masonry|outlayer|get\-size|doc\-ready|eventie|eventemitter/,
            loader: 'imports?define=&gt;false&amp;this=&gt;window'
          },
          // https://github.com/metafizzy/packery/issues/239#issuecomment-144992512
          {
            test: /.js$/,
            loader: 'imports?define=&gt;false',
            include: /(fizzy\-ui\-utils|outlayer|get\-size|packery)[\\\/]/
          },
          {
            test: /\.coffee$/,
            loader: "coffee-loader"
          },
          {
            test: /\.(coffee\.md|litcoffee)$/,
            loader: "coffee-loader?literate"
          }
        ]
      }
    }
  
    if(env !== 'test') {
      // Karma doesn't need entry points or output settings
      webpackConfig.entry = config.tasks.js.entries
  
      webpackConfig.output= {
        path: path.normalize(jsDest),
        filename: filenamePattern,
        publicPath: publicPath
      }
  
      if(config.tasks.js.extractSharedJs) {
        // Factor out common dependencies into a shared.js
        webpackConfig.plugins.push(
          new webpack.optimize.CommonsChunkPlugin({
            name: 'shared',
            filename: filenamePattern,
          })
        )
      }
    }
  
    if(env === 'development') {
      webpackConfig.devtool = 'source-map'
      webpack.debug = true
    }
  
    if(env === 'production') {
      webpackConfig.plugins.push(
        new webpackManifest(publicPath, config.root.dest),
        new webpack.DefinePlugin({
          'process.env': {
            'NODE_ENV': JSON.stringify('production')
          }
        }),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin(),
        new webpack.NoErrorsPlugin()
      )
    }
  
    return webpackConfig
  }
  </code></pre>
  
  <p><strong>As an aside I can't get the isotope jQuery plugin to be recognised either.</strong>
  Calling <code>$('.grid').isotope()</code> results in an <code>Uncaught TypeError: $(...).isotope is not a function</code> error. I'm not sure if they are related in any way; even though I've referenced jQuery <code>$ = require 'jquery'</code></p>
  
  <p>Any help would be greatly appreciated.</p>