Webpack找不到正确的文件路径

Question

我开始使用Webpack捆绑器，但是滑条有点问题。 光滑的字体和gif无法正确加载

似乎webpack跳过了我的项目所在的主文件夹，并在d：/ node_modules中而不是d：/ main_folder / node_modules中查找文件 我试图通过创建slick-fix.scss并设置字体和加载器路径来解决此问题 但不能正常工作

这是错误屏幕截图：

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'
          })
    ]
}

Answer 1

您无法从http服务器访问本地路径。换句话说，您不能直接从硬盘驱动器加载文件。它们必须由服务器提供服务。