Вставка mini-css-extract-plugin не работает, правда ⇐ Php

[Anonymous]

Я использую вставку плагина mini-css-extract-plugin в dom, но в голове он всегда работает.
Опция вставки, кажется, не работает

Код: Выделить всё

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: '/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')
})
)
]
});

html

Код: Выделить всё

...

php

Код: Выделить всё

...

Я пытаюсь использовать консоль или отладчик при вставке, но всегда не получается
ps:

Код: Выделить всё

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

Я ожидаю, что он сможет добавить ссылку

Подробнее здесь: https://stackoverflow.com/questions/790 ... -work-true