Rút gọn css từ webpack của ExtractTextPlugin và phong cách-loader

Question

Trong repo tracer này: https://github.com/pconerly/libsass-spritesmith-webpack-tracer

Và dòng này: https://github.com/pconerly/libsass-spritesmith-webpack-tracer/blob/master/webpack.config.js#L82

Tôi tải .scss, và giải nén chúng vào plaintext. Tôi cũng muốn giảm thiểu chúng --- làm thế nào để tôi làm điều đó? style-loader dường như không có tùy chọn. Tôi có nên sử dụng một plugin khác như css-loader thay thế không?

Answer 1

Tôi khuyên bạn nên xem postcs và postcss-loader. Bằng cách đó, một khi bạn đã thiết lập, bạn có thể thực hiện rất nhiều thứ thú vị với CSS/SCSS mà không phải mất hàng ngày để chống lại webpack trước.

Answer 2

Thêm mục nhập cho UglifyJsPlugin hoạt động cho tôi.

plugins: [ 
    new ExtractTextPlugin("[name].css"), 
    new webpack.optimize.UglifyJsPlugin({ 
     compressor: { warnings: false } 
    }) 
] 

Answer 3

Vì vậy, điều này sẽ tự động thông qua bộ tải CSS trừ khi bạn đã vô hiệu hóa nó một cách rõ ràng. Vì bạn đang đặt câu hỏi, tôi cho rằng điều này có nghĩa là bạn có. UglifyJsPlugin sẽ không tự mình rút gọn CSS nếu bạn đang trích xuất và không khai thác.

Đối với các nhu cầu của tôi, tôi cần trích xuất CSS và sau đó cung cấp cả phiên bản được rút gọn và không được rút gọn. Vì vậy, tôi chạy vào cùng một vấn đề mà tôi có thể có nó minified hoặc không minified nhưng không phải cả hai.

Tôi có thể làm việc này bằng cách sử dụng plugin optimize-css-assets cho Webpack. Nó sẽ cho phép bạn rút gọn CSS bạn đã trích xuất bằng cách sử dụng ExtractTextPlugin và bạn có thể đặt quy tắc RegEx tương tự như cài đặt UglifyJsPlugin.

Theo mặc định, plugin này sử dụng mô-đun css-nano để nén, mặc dù bạn có thể hoán đổi sang mô-đun ưu tiên nếu muốn.

Dưới đây là một cấu hình cơ bản:

plugins: [ 
    new ExtractTextPlugin('[name].css'), 
    new webpack.optimize.UglifyJsPlugin({ 
    compress: { warnings: false }, 
    include: /\.min\.js$/ 
    }), 
    new OptimizeCssAssetsPlugin({ 
    assetNameRegExp: /\.min\.css$/, 
    cssProcessorOptions: { discardComments: { removeAll: true } } 
    }) 
]