Webpack mini-css-extract-plugin 在文件名中使用查询字符串进行缓存破坏不起作用答案

【问题标题】：Webpack mini-css-extract-plugin using query string in file name for cache busting not workingWebpack mini-css-extract-plugin 在文件名中使用查询字符串进行缓存破坏不起作用
【发布时间】：2019-03-14 05:05:52
【问题描述】：

我在 .Net Mvc 项目（带有 .cshtml 视图）中使用 WebPack，我想输出所有带有查询字符串内容哈希数的文件。我正在使用 Mini Css 提取插件。到目前为止，我无法得到想要的结果。

这里的文件名是我的配置。

new MiniCssExtractPlugin({
   filename: "[name].css?v=[contenthash]",
})

例如，期望的结果必须是这样； layout.css?v=5ac967f1b94131934254

但它会输出这个 layout.css

这是我的整个 webpack 配置；

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        articlePage: path.resolve(__dirname, 'Content/webpack/articlePage/index.js'),
        boardPage: path.resolve(__dirname, 'Content/webpack/boardPage/index.js'),
        homePage: path.resolve(__dirname, 'Content/webpack/homePage/index.js'),
        layout: path.resolve(__dirname, 'Content/webpack/layout/index.js')
    },
    mode: 'production',
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    },
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: 4,
                uglifyOptions: {
                    comments: false,
                },
            }),
            new OptimizeCSSAssetsPlugin({})
        ],
        splitChunks: {
            chunks: 'all',
        }
    },
    plugins: [
        new CleanWebpackPlugin(['dist', 'static']),
        new MiniCssExtractPlugin({
            filename: "[name].[contenthash].css?v=[contenthash]",
        })
    ]
};

【问题讨论】：

标签： webpack query-string mini-css-extract-plugin

【解决方案1】：

1) layout.css?v=5ac967f1b94131934254 - 您确定要将其用作文件名吗？通常哈希被添加到文件名而不是扩展名中，而不是模仿 URL。

2) 与你不需要使用[contenthash]

使用版本控制mvc方式：

例如对于 Mvc 核心：

<link rel="stylesheet" href="~/dist/main.css" asp-append-version="true" />

这里重要的是：asp-append-version="true"

【讨论】：