如何通过 webpack 优化 css/less？

Question

我已经优化了js，但是如何优化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";

我的主要目标应该是一个带有 css 的 js 文件（就像我目前拥有的那样），没有 cmets 和从 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 配置