Webpack url-loader thiết lập đường dẫn đến

Question

Tôi đang sử dụng plugin url-loader webpack và có nó cấu hình như:

{ 
    test: /\.(ttf|eot|woff|woff2|svg)$/, 
    loader: "url-loader?limit=50000" 
} 

Nó tập tin đầu ra> 50k với hệ thống tập tin, nhưng tôi không thể tìm thấy làm thế nào để đặt đường dẫn đích.

Trong trường hợp này, tôi muốn các tệp được lưu trữ thành ./fonts chứ không phải gốc.

Answer 1

url-loader là xây dựng trong hồ sơ-loader, vì vậy bạn có thể sử dụng nó như file-loader, như hình dưới đây:

{ 
    test: /\.(ttf|eot|woff|woff2|svg)$/, 
    loader: "url-loader?limit=50000&name=fonts/[name].[ext]" 
} 

Answer 2

Để thêm vào các câu trả lời bằng @wandergis url-loader sẽ đổi tên hình ảnh nếu giới hạn kích thước vượt quá và sử dụng hàm băm cho tên. Khi sử dụng [name].[ext] như được đề xuất, hãy sử dụng tên gốc của tệp, đó không phải là những gì tôi cần. Tôi cần tên của hàm băm mà trình tải url sẽ tạo. Vì vậy, bạn có thể thêm [hash].[ext] để nhận tệp được đổi tên.

{ 
    test: /\.(ttf|eot|woff|woff2|svg)$/, 
    loader: "url-loader?limit=50000&name=fonts/[hash].[ext]" 
} 

Answer 3

bạn có thể viết nó như thế này

{ 
     test: /\.(png|woff|eot|ttf|svg|gif)$/, 
     use: [ 
      { 
      loader: 'url-loader', 
      options: { 
      limit: 1000, // if less than 10 kb, add base64 encoded image to css 
      name: "assets/[hash].[ext]" // if more than 10 kb move to this folder in build using file-loader 
      } 
     }] 
     }