Using Slick-Carousel and NPM
<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>