Question

我已经优化了js，但是如何优化css和更少的文件？

我不确定这段代码是做什么的（目前它是我的代码）：

{
    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没有注释和空格由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配置

如何通过webpack优化css / less？

1 个答案: