Question

我真的是webpack的新手，所以我不确定我做错了什么，我希望使用uikit而不是webpack，我已经安装了各自的加载器，如url-loader，文件装载机，少装载机

并包含在webpack配置

中

loaders: [{
  test: /\.jsx?$/,
  loaders: ['react-hot', 'babel'],
  include: path.join(__dirname, 'scripts')
 },
 {
test: /\.less$/,
loader: 'style!css!less'
},
{
       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"
   },
   {
       test: /\.jpe?g$|\.gif$|\.png$|\.wav$|\.mp3$/,
       loader: "file-loader"
   }
   /*,  <----I ALSO TRY WITH THIS CONFIG....
     { test: /\.woff$/,   loader: "url-loader?prefix=font/&limit=5000&mimetype=application/font-woff" },
     { test: /\.ttf$/,    loader: "file-loader" },
     { test: /\.eot$/,    loader: "file-loader" },
     { test: /\.svg$/,    loader: "file-loader" }*/

我在我的js文件的入口点包含我的less文件

 require("!css!less!../less/main.less")

我的文件看起来像

@import“../ bower_components / uikit / less / uikit.less”;

HTML { 背景颜色：红色; }

目录 enter image description here

当我尝试运行控制台时显示：

ERROR in ./~/css-loader!./~/less-loader!./less/main.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../bower_components/uikit/less/fonts/fontawesome-webfont.eot in /home/yo/Downloads/proj/scalaPROJ/activatorPRJ/finatra-seed/react-hot-boilerplate/less
 @ ./~/css-loader!./~/less-loader!./less/main.less 6:77369-77440 6:77463-77534

ERROR in ./~/css-loader!./~/less-loader!./less/main.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../bower_components/uikit/less/fonts/fontawesome-webfont.woff2 in /home/yo/Downloads/proj/scalaPROJ/activatorPRJ/finatra-seed/react-hot-boilerplate/less
 @ ./~/css-loader!./~/less-loader!./less/main.less 6:77586-77659

ERROR in ./~/css-loader!./~/less-loader!./less/main.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../bower_components/uikit/less/fonts/fontawesome-webfont.woff in /home/yo/Downloads/proj/scalaPROJ/activatorPRJ/finatra-seed/react-hot-boilerplate/less
 @ ./~/css-loader!./~/less-loader!./less/main.less 6:77690-77762

ERROR in ./~/css-loader!./~/less-loader!./less/main.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../bower_components/uikit/less/fonts/fontawesome-webfont.ttf in /home/yo/Downloads/proj/scalaPROJ/activatorPRJ/finatra-seed/react-hot-boilerplate/less
 @ ./~/css-loader!./~/less-loader!./less/main.less 6:77794-77865
webpack: bundle is now VALID.

希望错误对你来说更清楚，并且可以帮助我，非常感谢

Answer 1

我建议您以简短的方式编写加载程序

<强> webpack.config.js

 $(document).ready(function() {

    /* helper function to main database querying function
       below. Figures out the number of activities needed
       for completeness. Takes the box's class name as an
       argument
    */
    var complete = function(arg) {
        switch(arg) {
            case "three":
                return 3;
            case "four":
                return 4;
            case "seven":
                return 7;
        }
    };


    // determine if we change color of box
    var changeColor = function(arg) {
        if (arg.hasClass("zero")) {
            arg.removeClass("zero").addClass("between");
        }
            else if (arg.hasClass("between")) {
                if (numComplete == toComplete) {
                    arg.removeClass("between").addClass("complete");
                } 
            }
    };


    // CHANGE BOX COLOR WHEN HOVERING OVER IT
    $(".innerBox").hover(function() {
            if ($(this).hasClass("zero")) {
                    $(this).addClass("innerBoxHoverGrey");
            }
            else if ($(this).hasClass("between")) {
                    $(this).addClass("innerBoxHoverYellow");
            } else {
                    $(this).addClass("innerBoxHoverGreen");
            }},

        function() {
            if ($(this).hasClass("innerBoxHoverGrey")) {
                $(this).removeClass("innerBoxHoverGrey");
            } else if ($(this).hasClass("innerBoxHoverYellow")) {
                $(this).removeClass("innerBoxHoverYellow");
            } else {
                $(this).removeClass("innerBoxHoverGreen");
            }
        }
    );


    // WHERE ALL THE JUICE IS - CLICK ON A BOX, CHECK WITH DATABASE
    $(".innerBox").bind("click", function() {

        // This is what we'll be passing to everything
        var className = $(this).attr("id");
        var numComplete;
        var toComplete;

        // DATA TO PASS 
        var data = {
            "val": className
        };

        // TAKE CARE OF TIME FIRST
        var recentlyCompleted = false;


        $.getJSON("time.php", function(result) {
            $.each(result, function(key, val)) {
                recentlyCompleted = val;
            };
        });

        /*
        if (!recentlyCompleted) {
            throw new Error("error");
        } else {

            // UPDATE ACTIVITY TABLE - not meant to return anything
            $.getJSON("updateActivityTable.php", data, function(newResult) {
                alert(newResult);
            });

            // UPDATE TIME TABLE - not meant to return anything
            $.getJSON("updateActivityTimeTable.php", data, function(newResult) {
                alert(newResult);
            });

            // UPDATE UI BASED ON ACTIVITIES COMPLETED
            var spanName = className + "Num";

            $.getJSON("getActivityNum.php", data, function(newResult) {
                    $.each(result, function(key, val)) {
                        $("#"+spanName).html(val);
                        numComplete = val;
                    }});


            // figure out how many activities means its
            //  complete
            toComplete = complete($(this).attr("class"));

            changeColor($(this));
        }*/ 
    }); 

})

别忘了

loaders: [
... other loaders
{
    test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/,
    loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
}

结帐变量@ icon-font-path应该是

/bower_components/uikit/less/core/icon.less

npm install url-loader --save-dev

webpack较少错误，它无法解析来自uikit的.ttf和woff2文件

1 个答案: