mini-css-extract-plugin insert is no work true

Question

I use mini-css-extract-plugin insert to the dom but it always work in head insert option seem it no work

import { root } from './shared.mjs';
import webpack from 'webpack';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import CopyWebpackPlugin from 'copy-webpack-plugin';
import { CleanWebpackPlugin } from 'clean-webpack-plugin';
import { merge } from 'webpack-merge';
import autoprefixer from 'autoprefixer';
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
import html from 'html-webpack-plugin';
import htmlInjector from 'html-webpack-injector';
import ReactRefreshPlugin from '@pmmmwh/react-refresh-webpack-plugin';
import path from 'path';
const timestamp = new Date().getTime();
const htmlConfig = {
    template: root('index.html'),
    inject: true,
    minify: false,
    cache: true,
    scriptLoading: 'blocking'
};

const babelConfig = {
    presets: ['@babel/preset-env'],
    plugins: [
        ['@babel/plugin-proposal-class-properties', { loose: true }],
        ['@babel/plugin-transform-private-methods', { loose: true }],
        ['@babel/plugin-transform-private-property-in-object', { loose: true }],
        ['@babel/plugin-syntax-dynamic-import'],
        [
            '@babel/plugin-proposal-decorators',
            {
                legacy: true
            }
        ]
    ]
};
const babelConfigWithHmr = merge(babelConfig, {
    plugins: [['react-refresh/babel']]
});

const baseConfig = {
    entry: {
        index: root('src/app/index.tsx')
    },
    stats: 'minimal',
    optimization: {
        runtimeChunk: 'single'
    },
    target: ['web', 'es3'],
    output: {
        filename: `[name].js?${timestamp}`,
        libraryExport: 'default',
        environment: {
            arrowFunction: false,
            bigIntLiteral: false,
            const: false,
            destructuring: false,
            dynamicImport: false,
            dynamicImportInWorker: false,
            forOf: false,
            globalThis: false,
            module: false,
            optionalChaining: false,
            templateLiteral: false
        }
    },
    resolve: {
        extensions: ['.js', '.json', '.ts', '.tsx'],
        alias: {
            vue$: 'vue/dist/vue.esm.js',
            '@': root('src')
        }
    },
    module: {
        rules: [
            {
                test: /\.(css|scss)$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../../'
                        }
                    },
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    autoprefixer({
                                        overrideBrowserslist: 'last 100 versions'
                                    })
                                ]
                            }
                        }
                    },
                    'sass-loader'
                ]
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    esModule: false,
                    limit: 20000,
                    name: 'img/[name].[hash:7].[ext]'
                },
                type: 'javascript/auto'
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    esModule: false,
                    limit: 10000,
                    name: 'fonts/[name].[hash:7].[ext]'
                },
                type: 'javascript/auto'
            }
        ]
    },
    plugins: [
        new ForkTsCheckerWebpackPlugin(),
        new htmlInjector(),
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: root('public'),
                    to: ''
                }
            ]
        })
    ],
    infrastructureLogging: {
        level: 'error'
    }
};

export const devConfig = merge(baseConfig, {
    mode: 'development',
    output: merge(baseConfig.output, {
        publicPath: '/'
    }),
    devtool: 'eval',
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /node_modules/i,
                use: [
                    {
                        loader: 'babel-loader',
                        options: babelConfigWithHmr
                    }
                ]
            },
            {
                test: /\.tsx?$/,
                exclude: /node_modules/i,
                use: [
                    {
                        loader: 'babel-loader',
                        options: babelConfigWithHmr
                    },
                    'ts-loader'
                ]
            }
        ]
    },
    plugins: [
        new ReactRefreshPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        new MiniCssExtractPlugin({
            filename: 'index.css',
        }),
        new html(merge(htmlConfig))
    ]
});

export const buildConfig = merge(baseConfig, {
    mode: 'production',
    output: {
        publicPath: '<{$staticUrl}>/release/',
        path: root('release'),
        filename: `js/[name].js?${timestamp}`,
        chunkFilename: `js/[id].js?${timestamp}`,
        clean: true
    },
    devtool: false,
    optimization: {
        minimize: true,
        nodeEnv: 'production'
    },
    stats: 'none',
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /node_modules\/!(mobx)/i,
                use: [
                    {
                        loader: 'babel-loader',
                        options: babelConfig
                    }
                ]
            },
            {
                test: /\.tsx?$/,
                exclude: /node_modules/i,
                use: [
                    {
                        loader: 'babel-loader',
                        options: babelConfig
                    },
                    'ts-loader'
                ]
            }
        ]
    },
    plugins: [
        new webpack.ids.HashedModuleIdsPlugin(),
        new MiniCssExtractPlugin({
            filename: `css/[name].css?${timestamp}`,
            insert:'#css-loader',
        }),
        new html(
            merge(htmlConfig, {
                filename: root('../../template/ymgf/index.php')
            })
        )
    ]
});

the html

<{template file=_header dir=zhuanti}>
<div id="css-loader"></div>
...

the php

<head><link href="<{$staticUrl}>/release/css/index.css?1727605754802" rel="stylesheet"></head> 
<{template file=_header dir=zhuanti}>
<div id="css-loader"></div>
...

i try to use console or debugger in insert ,but is always not work ps：

insert: function (linkTag) {
    document.querySelector('#css-loader').appendChild(linkTag);
}

i expect it can add link in