css - webpack如何优化css/less？

Question

我已经优化了js，但是如何优化css和less文件呢？

我不确定这段代码的作用(这是我目前拥有的代码):

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

我尝试使用: https://github.com/webpack-contrib/less-loader 但是没有结果，实际上结果是构建错误。

也许是因为我少了一个文件并且里面有很多不同的导入。 我可以导入 css，min.css，更少。

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

主要目标我应该有一个带有 css 的 js 文件(目前我有)，没有从 less 或 css 生成的注释和空格。

Answer 1

有一个包叫optimize-css-assets-webpack-plugin .这是我使用的一个简单的 css webpack 设置

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 部分而不是完整的 webpack 配置