• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

[webpack, jQuery, slick-slider] Problem ze slick sliderem

VPS Starter Arubacloud
+1 głos
493 wizyt
pytanie zadane 19 maja 2019 w JavaScript przez 42savage Bywalec (2,630 p.)

Cześć i czołem, 

ostatnio zacząłem zabawe z webpackiem i natknąłem się na pewien problem.

Otóż gdy zainstalowałem przez npm slick slider i chciałem go ładnie odpalić pojawił się taki problem

zdaje się, że slick działa poprawnie do momentu, aż ma wczytać tego gifa, bo do divów dopisywane są klasy odpowiedzialne za owy slider.

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development --watch",
    "build": "webpack --mode production --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^2.1.1",
    "image-webpack-loader": "^4.6.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.31.0",
    "webpack-cli": "^3.3.2"
  },
  "dependencies": {
    "jquery": "^3.4.1",
    "slick-carousel": "^1.8.1"
  }
}
const path = require("path");
var webpack = require('webpack');
module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          "style-loader",
          "url-loader",
          "css-loader",
          "sass-loader"
        ]
      },
      {
        test: /\.(png|jpg|gif)$/,
        loader: 'url-loader'
      }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery-3.4.1',
      jQuery: 'jquery'
    })
  ]
};

Pomoże ktoś to rozwiązać?

Gdzieś wyczytałem, że muszę dodać url loadera, żeby mi wczytało tego gifa, więc prawdopodobnie źle to skonfigurowałem, albo po prostu ten url loader nie działa.

komentarz 22 maja 2019 przez 42savage Bywalec (2,630 p.)
edycja 22 maja 2019 przez 42savage

Znalazłem pewien sposób, zrobiłem slick fixa - zostało tylko podanie poprawnej ścieżki

zauważyłem, że przeglądarka szuka w ten sposób

file:///D:/node_modules/slick-carousel/slick/ajax-loader.gif

pomija folder tego_typu

kolejne spostrzeżenie:

gdy dodałem w tym fixie tego typu przeglądarka szuka w tym miejscu

file:///D:/tego_typu/dist/tego_typu/node_modules/slick-carousel/slick/ajax-loader.gif

komentarz 23 maja 2019 przez ScriptyChris Mędrzec (190,190 p.)

zauważyłem, że przeglądarka szuka w ten sposób

To widać w komunikacie błędu, który pokazałeś. Ja poprosiłem żebyś zdebugował ten błąd - żeby było wiadomo, co inicjuje pobieranie i skąd bierze ścieżkę.

gdy dodałem w tym fixie tego typu przeglądarka szuka w tym miejscu

Pokaż w jaki sposób ustawiłeś context

komentarz 23 maja 2019 przez 42savage Bywalec (2,630 p.)
edycja 24 maja 2019 przez 42savage

Screeny wrzucam na imgura, bo na forum uploadują się w za małej, nieczytelnej rodzielczości

https://imgur.com/a/jUzG1Ot

ps. dodawanie do tego contexta "/" nic nie zmienia

komentarz 24 maja 2019 przez ScriptyChris Mędrzec (190,190 p.)

dodawanie do tego contexta "/" nic nie zmienia

Spróbuj z "./" lub path.resolve(__dirname, 'src')

W konsoli webpacka (na tym screenie) masz błąd dotyczący SCSS - sprawdź to.

komentarz 25 maja 2019 przez 42savage Bywalec (2,630 p.)
próbowałem nawet (__dirname + 'src')

spróbuje wszystko od nowa zrobić, być może gdzieś strzeliłem literówke i i to przez to

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
2 odpowiedzi 248 wizyt
pytanie zadane 27 maja 2019 w JavaScript przez Luckyluck87 Użytkownik (660 p.)
+1 głos
0 odpowiedzi 195 wizyt
pytanie zadane 6 maja 2017 w JavaScript przez DarQ Obywatel (1,030 p.)
0 głosów
1 odpowiedź 190 wizyt
pytanie zadane 22 czerwca 2019 w JavaScript przez 42savage Bywalec (2,630 p.)

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...