MiniCssExtractPlugin 不使用散列作为参数

Question

我正在使用 MiniCssExtractPlugin 作为 CSS 压缩器。

外部项目使用了CSS文件，因此需要使用hash作为参数。

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

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',
      ],
    }
  );

Answer 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,
                },
            },
        })
    ]
},

MiniCssExtractPlugin 不使用散列作为参数

MiniCssExtractPlugin not working with hash as parameter

minify

webpack

css-loader