lỗi webpack ít hơn, nó không thể giải quyết các tệp .ttf và woff2 từ uikit

Question

Tôi thực sự là người mới với webpack, vì vậy tôi không chắc chắn nếu tôi đang làm điều gì sai, tôi muốn sử dụng uikit và ít hơn với webpack, tôi đã cài đặt bộ tải tương ứng như url-loader, file-loader, ít nạp

và đưa vào webpack cấu hình

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" }*/ 

]

tôi bao gồm ít tập tin của tôi trong entry point của tệp js của tôi

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

và tập tin ít của tôi trông giống như

@import "../bower_components/uikit/less/uikit.less";

html { màu nền: đỏ; }

thư mục

khi tôi cố gắng chạy giao diện điều khiển cho thấy điều này:

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. 

hy vọng các lỗi này sẽ được nhiều hơn nữa rõ ràng cho bạn và có thể giúp tôi, cảm ơn rất nhiều

Answer 1

Tôi khuyên bạn nên viết bộ tải theo cách ngắn

webpack.config.js

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

Đừng quên

npm install url-loader --save-dev 

Và biến kiểm tra @ icon-font-con đường nó phải được

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

"../../fonts";