使用Slick-Carousel和NPM

Question

仍在努力掌握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个小时试图解决它,然后寻求帮助.

非常感谢任何帮助.

Answer 1

我有同样的问题,但我不想在我的项目中改变光滑的旋转木马,所以迟了一个月,但这是我如何解决它:

首先安装Webpack image-loader:

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

然后更改这些行(在您的webpack配置中):

loaders: [{ 
          test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader", "file-loader")
        },
        {  
           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"
 }]

这将改变图像加载器的文件加载器(用于加载图像的内容),它将知道如何编译.gif文件和其他格式.

有关此问题的附加信息,您可以查看github页面

此外,如果您正在使用ReactJS,请不要直接使用slick -carousel,因为它使用直接DOM操作,这要归功于JQuery依赖,现在我使用react-slick非常稳定并且有很酷的选项,比如基于响应式布局的设置自定义上一页和下一页箭头等.

我希望它对你有所帮助