title: Using Slick-Carousel and NPM
body: <p>Still trying to master NPM and hit some roadblocks.</p>
  
  <p>My slick-carousel works great when I use the CDN process. But I'm doing everything in NPM so figured I should do the same with this plug-in, but can't seem to get it off the ground.</p>
  
  <p>Ran the install:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>npm install slick-carousel --save</code></pre>
  </div>
  </div>
  </p>
  
  <p>Which adds to my package.json file:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  "devDependencies": {
      "copy-webpack-plugin": "^3.0.1",
      "css-loader": "^0.23.1",
      "extract-text-webpack-plugin": "^1.0.1",
      "file-loader": "^0.9.0",
      "gh-pages": "^0.11.0",
      "html-webpack-plugin": "^2.21.0",
      "img-loader": "^1.3.1",
      "style-loader": "^0.13.1",
      "url-loader": "^0.5.7",
      "webpack": "^1.13.1"
    },
    "dependencies": {
      "font-awesome-webpack": "0.0.4",
      "jquery": "^3.0.0",
      "slick-carousel": "^1.6.0"
    }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm smart enough to know that I need to require the file in my index.js file:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var $ = require('jquery');
  
  require("../css/style.css");
  require("font-awesome-webpack");
  require("slick-carousel");</code></pre>
  </div>
  </div>
  </p>
  
  <p>I can see that I now have all the jQuery for slick-carousel, but none of the css.</p>
  
  <p>Now I figure I should require the two .css files living in the node_modules folder:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>require("slick-carousel/slick/slick.css");
  require("slick-carousel/slick/slick-theme.css");</code></pre>
  </div>
  </div>
  </p>
  
  <p>And this is where it all breaks.  The slick.css file loads and the basic slick-carousel is now working in my html output. But the slick-theme file breaks everything by pushing this error:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>./~/slick-carousel/slick/ajax-loader.gif
  Module parse failed: /Users/ryanbuchholtz/Documents/thinkful/haventower/node_modules/slick-carousel/slick/ajax-loader.gif Unexpected character '' (1:7)
  You may need an appropriate loader to handle this file type.
  SyntaxError: Unexpected character '' (1:7)</code></pre>
  </div>
  </div>
  </p>
  
  <p>This makes me think something is broken in my webpack.config.js:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var path = require('path');
  var packageData = require('./package.json');
  var filename = [packageData.name, packageData.version, 'js'];
  
  var HtmlWebpackPlugin = require('html-webpack-plugin');
  var webpack = require('webpack');
  var ExtractTextPlugin = require("extract-text-webpack-plugin");
  var CopyWebpackPlugin = require('copy-webpack-plugin');
  
  
  
  var plugins = [
      new HtmlWebpackPlugin({
        inject: 'head',
        template: 'index.html',
        minify: {
          "collapseWhitespace": true, 
          "removeComments": true, 
          "removeRedundantAttributes": true, 
          "removeScriptTypeAttributes": true, 
          "removeStyleLinkTypeAttributes": true
        }
      }),
      new ExtractTextPlugin('style.css')
    ];
  
  module.exports = {
      entry: {
        main: [
          path.resolve(__dirname, packageData.main)
        ]
      },
  
      output: {
          path: path.resolve(__dirname, 'build'),
          filename: filename.join('.'),
      },
      devtool: 'source-map',
      plugins: plugins,
      module: {
        loaders: [
          { 
            test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader", "file-loader")
          },
          { test: /\.(jpe?g|png|gif|svg)$/, loader: "file-loader"
          },
          {   test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&amp;minetype=application/font-woff"
            },
          {   test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader"
            }
        ]
      }
  
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>I could really use some assistance in the best way to use slick-carousel while building in NPM and with webpack. So many moving pieces and, when I kinda think I get it, this comes along and I spend 7 hours trying to fix it before asking for help.</p>
  
  <p>Any help is deeply appreciated.</p>