jquery-plugins – 使用Slick-Carousel和NPM

仍在努力掌握NPM并遇到一些障碍.

当我使用CDN过程时,我的光滑旋转木马很有效.但是我正在NPM中做所有事情,所以我觉得我应该对这个插件做同样的事情,但似乎无法让它开始.

跑了安装：

npm install slick-carousel --save

哪个添加到我的package.json文件：

"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"
  }

我很聪明地知道我需要在index.js文件中要求该文件：

var $= require('jquery');

require("../css/style.css");
require("font-awesome-webpack");
require("slick-carousel");

我可以看到我现在拥有所有jQuery for slick-carousel,但没有css.

现在我想我应该要求生成在Node_modules文件夹中的两个.css文件：

require("slick-carousel/slick/slick.css");
require("slick-carousel/slick/slick-theme.css");

这就是它破裂的地方. slick.css文件加载,基本的slick-carousel现在在我的html输出中工作.但是,光滑的主题文件通过推送此错误来打破所有内容：

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

这让我觉得我的webpack.config.js中有些东西被破坏了：

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&minetype=application/font-woff"
          },{   test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,loader: "file-loader"
          }
      ]
    }

};

在使用NPM和webpack构建时,我可以使用一些最好的方式来使用光滑轮播.这么多活动件,当我认为我得到它时,这就出现了,我花了7个小时试图解决它,然后寻求帮助.

非常感谢任何帮助.

$npm install image-webpack-loader --save-dev

loaders: [{ 
          test: /\.css$/,{  
           test: /\.(jpe?g|png|gif|svg)$/i,loaders: [
            'file?hash=sha512&digest=hex&name=[hash].[ext]','image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
           ]
        },{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,loader: "url-loader?limit=10000&minetype=application/font-woff" },{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,loader: "file-loader"
 }]