MiniCssExtractPlugin 不使用哈希作为参数答案

【问题标题】：MiniCssExtractPlugin not working with hash as parameterMiniCssExtractPlugin 不使用哈希作为参数
【发布时间】：2019-06-10 12:59:04
【问题描述】：

我使用 MiniCssExtractPlugin 作为 CSS 缩小器。

CSS 文件用于外部项目，因此，我需要使用哈希作为参数。

我哈希是文件名的一部分，然后一切正常。例子

plugins.push(
    new MiniCssExtractPlugin({
      filename: '[name].[hash:4].css',
    })
  );

但如果哈希作为参数传递

plugins.push(
    new MiniCssExtractPlugin({
      filename: '[name].css?[hash:4]',
    })
  );

文件将被生成但不会被缩小。

 rules.push(
    {
      test: /\.css$/,
      exclude: paths.navigation,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader',
        'postcss-loader',
      ],
    }
  );

【问题讨论】：

标签： webpack minify css-loader

【解决方案1】：

MiniCssExtractPlugin 不会缩小你的 css，所以如果你想缩小你的 css 使用 mini-css-extract-plugin

运行此命令进行安装

npm install --save-dev mini-css-extract-plugin

然后在你的 webpack 中

const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");


optimization: {
    minimizer: [
        new OptimizeCSSAssetsPlugin({
            cssProcessorOptions: {
                safe: true,
                discardComments: {
                    removeAll: true,
                },
            },
        })
    ]
},

【讨论】：