如何通过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？

回答

相关问题