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

Question

我在.Net Mvc项目中使用WebPack(带有.cshtml视图(，我想输出所有带有查询字符串内容哈希号的文件。我正在使用迷你 css 提取插件。到目前为止，我无法得到预期的结果。

对于文件名，这是我的配置。

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

例如，期望的结果必须是这个;布局.css？v=5ac967f1b94131934254

但相反，它输出这个布局.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]",
})
]
};

Answer 1

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

2(与你不需要使用[内容哈希]

使用版本控制 mvc 方式：

例如，对于 MVC 内核：

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

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