Webpack không thể tải tệp phông chữ: Mã thông báo không mong muốn

Question

Tôi có tệp style.css sử dụng tệp phông chữ và tôi gặp sự cố khi tải tệp phông bằng cách sử dụng Webpack. Dưới đây là cấu hình bộ nạp của tôi:

loaders : [ 
     { 
      test : /\.(js|jsx)$/, 
      exclude : /node_modules/, 
      loader : 'react-hot!babel-loader' 
     }, { 
      test : /\.styl/, 
      loader : 'style-loader!css-loader!stylus-loader' 
     }, { 
      test : /\.css$/, 
      loader : 'style-loader!css-loader' 
     }, { 
      test : /\.(png|jpg)$/, 
      loader : 'url-loader?limit=8192' 
     }, { 
      test : /\.(ttf|eot|svg|woff(2))(\?[a-z0-9]+)?$/, 
      loader : 'file-loader' 
     } 
     /*}, { 
     test : /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
     loader : 'url-loader?limit=10000&minetype=application/font-woff'*/ 
    ] 

Các lỗi mà tôi nhận được là

ERROR in ./src/fonts/icon/fonts/mf-font.woff?lt4gtt 
Module parse failed: /PATH/src/fonts/icon/fonts/mf-font.woff?lt4gtt Line 1: Unexpected token ILLEGAL 
You may need an appropriate loader to handle this file type. 
(Source code omitted for this binary file) 
@ ./~/css-loader!./src/fonts/icon/style.css 2:293-331 

Có vẻ với tôi rằng Webpack đang dùng nó như là một file CSS khi nó không phải. Nhưng tôi chắc chắn rằng biểu thức kiểm tra chuyển cho tệp phông chữ

Answer 1

Biểu thức chính quy trong biểu thức thử nghiệm của bạn có một lỗi nhỏ. woff(2) nghĩa là luôn tìm kiếm woff2 và chỉ chụp 2 trong một nhóm riêng biệt. Nếu bạn thêm một ? sau nó, webpack sẽ có thể nhận ra woff cũng như:

test : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, 
loader : 'file-loader' 

Xin vui lòng cho tôi biết nếu điều này làm việc.

Answer 2

này đã làm các trick cho tôi:

{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, 
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },