How to minimize webpack to-string-loader css?

问题

I'm using this solution: https://stackoverflow.com/a/45452306/417620. It works great, but the CSS content that is returned has comments and is not minified.

module: [
    rules: [
      {
        test: /\.css$/,
        use: ['to-string-loader', 'css-loader']
      }
    ]
  }

I'm using webpack 4. I've tried to use a number of different loaders, but they seem to no longer work with webpack 4 or they only work when the CSS is exported to a file. Is there anyway to remove the CSS comments and minify the CSS that is returned?

Here is the js that is returning the CSS as a string. import myCss from './myCss.css';

回答1:

You need to give minimize option true to your css-loader

module: [
    rules: [
        {
          test: /\.css$/,
          use: [
            {
              loader: "to-string-loader",
            },
            {
              loader: "css-loader",
              options: { minimize: true },
            },
          ],
       }
    ]
  }

to-string-loader will help to convert it to string. Minification will be taken care by css-loader.

Hope it helps. Revert for any doubts.

回答2:

I was able to resolve the issue using postcss-loader.

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "to-string-loader",
          "postcss-loader",
        ],
      },
    ],
  },

Reference https://webpack.js.org/loaders/postcss-loader/

来源：https://stackoverflow.com/questions/54955567/how-to-minimize-webpack-to-string-loader-css