如何通過webpack優化css/less？

我已經優化了js，但是如何優化css和更少的文件？如何通過webpack優化css/less？

我不知道這是什麼做的代碼（這是目前我有什麼）：

{ 
    test: /\.less$/, 
    loader: "style!css!autoprefixer!less" 
},

我試着使用： https://github.com/webpack-contrib/less-loader 但沒有結果，實際結果是錯誤的版本。

也許是因爲我有一個較少的文件，並在很多不同的導入。我可以導入css，min.css，less。

@import "hud/styling/hud.less"; 
@import "~video.js/dist/video-js.min.css"; 
@import "canvas/spots.css";

主要目標我應該有一個js文件（目前我有）與CSS沒有評論和空間生成從較少或CSS。

來源

2017-07-27 Mediator

你是在說'optimization'或'minification'？ – Cristy

其實都是。我致力於減少我的應用程序的大小 – Mediator

有一個包裝叫做optimize-css-assets-webpack-plugin。這是我用

var webpack = require('webpack'); 
var path = require('path'); 
var ExtractTextPlugin = require("extract-text-webpack-plugin"); 
var OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin"); 

    module: { 
    rules: [{ 
     use: [{ 
     test: /\.(less|css)$/, 
     use: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: ['css-loader', 'postcss-loader', 'less-loader'] 
     }) 
    }] 
    }, 
    plugins: [ 
    new ExtractTextPlugin("styles.css"), 
    new OptimizeCssAssetsPlugin({ 
     assetNameRegExp: /\.optimize\.css$/g, 
     cssProcessor: require('cssnano'), 
     cssProcessorOptions: { discardComments: {removeAll: true } }, 
     canPrint: true 
    }), 
    ] 

module.exports = config

一個簡單的CSS的WebPack設置這僅僅是CSS的WebPack部分不完整的WebPack配置

來源

2017-07-28 03:12:30

我無法設置它。 node_modules \ extract-text-webpack-plugin \ dist \ lib \ helpers.js：15 return chunk.isInitial（）|| chunk.parents.length === 0; – Mediator

它看起來像是webpack 3.0.0的一個問題。 [Github問題]（https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/554） –

嘗試卸載extract-text-webpack-plugin並安裝[email protected] .0-rc.2 –

如何通過webpack優化css/less？

回答

相關問題