Tránh sao chép đầu ra bằng cách sử dụng gói webpack, trình tải ít hơn và giải nén văn bản-webpack-plugin

Question

Tôi đang sử dụng gói webpack để đóng gói các tệp của mình, bao gồm css (ít hơn).

Nó hoạt động tốt với các tệp css, nhưng ngay sau khi tôi thêm trình tải ít hơn trong trò chơi, ít tệp được yêu cầu từ các tệp ít khác (tệp phổ biến) đang được sao chép trong đầu ra.

Những gì tôi nghĩ tôi làm:

 |-------entry.js-------| 
    |      | 

componentOne.js           componentTwo.js
            |                                             |
      one.less                               two.less
            \                                          /
              \ ----- common.less ----/

webpack gì nghĩ rằng tôi làm:

 |-------entry.js-------| 
    |      | 

componentOne.js           componentTwo.js
            |                                             |
      one.less                               two.less
            |                                             |
common.less                         common.less

Kết quả này trong common.less được lặp đi lặp lại trong đầu ra của tôi nhiều lần như nó là bắt buộc. Một lần nữa, không có trình nạp ít hơn, common.css được nhận dạng là cùng một mô-đun khi được yêu cầu lần thứ hai.

Here's a repo illustrating this

EDIT: Sau một số cuộc điều tra dường như nhập khẩu ít tập tin từ các file ít khác được bao gồm bởi trình biên dịch ít và không phải là webpack hệ thống yêu cầu. Các bản sao sau đó sẽ có ý nghĩa.

EDIT2: Cách tránh điều này là để các tệp phổ biến của bạn không xuất ra bất kỳ thứ gì. Vẫn còn một số hạn chế, ví dụ:

.@{a}() { 
 
    // rules... 
 
}

Answer 1

Cú pháp @import hỗ trợ khả năng bao gồm tệp Ít của bạn mà không tạo bất kỳ đầu ra nào thông qua từ khóa reference.

@import (reference) 'common.less'; 

tôi sử dụng một cái gì đó giống như ở trên để tái sử dụng các biến và mixins từ Bootstrap, ngay cả khi họ import ed hoặc require 'd nhiều lần bởi các tập tin JavaScript khác nhau.Tài liệu Less Import Options mô tả các giới hạn của tính năng này và các tùy chọn khác chi tiết hơn.

Answer 2

Sẽ tốt hơn để di chuyển common.less thành một mô-đun thông thường bằng cách sử dụng CommonsChunkPlugin. Bằng cách đó nó có thể được chunked ra bởi webpack.