我在 .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]",
})
]
};