Webpack не может правильно найти путь к скользким файлам - PullRequest
Новая
       13

Webpack не может правильно найти путь к скользким файлам

0 голосов
/ 03 июня 2019

Я начал использовать упаковщик веб-пакетов, и у меня возникла небольшая проблема с скользящим слайдером.Гладкие шрифты и gif загружаются неправильно

Похоже, веб-пакет пропускает основную папку, где находится мой проект, и ищет файлы в d: / node_modules вместо d: / main_folder / node_modules, которые я пытался исправитьэто путем создания slick-fix.scss и установки шрифта и пути к загрузчику, но он не работает должным образом

Это скриншот ошибки:

enter image description here

slick-fix.scss 

$slick-loader-path: "/node_modules/slick-carousel/slick/" !default;
$slick-font-path: "/node_modules/slick-carousel/slick/fonts/" !default;

main.scss 

@import "slick-fix";
@import "~slick-carousel/slick/slick.scss";
@import "~slick-carousel/slick/slick-theme.scss";

main.js 

require('./styles/main.scss');
require('jquery');
import 'slick-carousel/slick/slick';
$('.slider').slick();

const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const webpack = require('webpack');
const $ = require('jquery');


module.exports = {
    context: path.resolve(__dirname),
    entry: './src',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'
    },
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: { minimize: true }
                    }
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader',
                ]
            },
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                      limit: 8192,
                    }
                  }
                ]
              }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "./index.html"
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.$': 'jquery',
            'window.jQuery': 'jquery'
          })
    ]
}

1 Ответ

0 голосов
/ 04 июня 2019

Вы не можете получить доступ к локальным путям с вашего http-сервера.Другими словами, вы не можете напрямую загружать файлы с жесткого диска.Они должны обслуживаться сервером.

...