Webpack mini-css-extract-plugin, использующий строку запроса в имени файла, для очистки кэша не работает - PullRequest
Новая
       15

Webpack mini-css-extract-plugin, использующий строку запроса в имени файла, для очистки кэша не работает

0 голосов
/ 09 октября 2018

Я использую WebPack в проекте .Net Mvc (с представлениями .cshtml) и хочу вывести все файлы с хэш-номерами содержимого строки запроса.Я использую плагин Mini Css Extract.До сих пор я не мог получить желаемый результат.

Для имени файла здесь моя конфигурация. 

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

1 Ответ

0 голосов
/ 13 октября 2018

1) layout.css? V = 5ac967f1b94131934254 - вы уверены, что хотите использовать его в качестве имени файла?обычно хеш добавляется в имя файла, а не расширение и не имитирует URL.

2) При этом вам не нужно использовать [contenthash]

Использовать версию mvc способом:

Напримердля Mvc Core: 

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

Здесь важно: asp-append-version="true"

...