javascript - Webpack 找不到光滑文件的正确路径

问题描述

我开始使用 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;

主文件

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

标签： javascripthtmlwebpackslick.js

javascript - Webpack 找不到光滑文件的正确路径

问题描述

解决方案

推荐阅读