webpackでCSS/Lessを最適化する方法は？

Question

私は既にjsを最適化していますが、CSSとファイルの最適化はどうですか？

は、私は（それは私が持っているもの現在）このコードが何をするかわからない：

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

は、私が使用してみました： https://github.com/webpack-contrib/less-loader しかしノー結果、実際にエラーがビルドの上にある結果。

多分私は1つ少ないファイルを持っていて、多くの異なるインポートを持っている理由です。 そして、私はcss、min.css、lessをインポートできます。

主な目標私はコメントとスペースが少ないまたはcssから生成されたCSSなしで（現在の私は）1つのjsファイルを持つべきです。

Answer 1

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の部分ではない