удалить относительные URL и использовать абсолютные URL в CSS импорте.
код веб-пакета -
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
}),
файл комплекта в html равен
это относительно путь, но я хочу установить абсолютный путь к этому. css URL из файла конфигурации веб-пакета с использованием MiniCssExtractPlugin
Воздействие Злоумышленник может обмануть браузеры при импорте кода JavaScript или HTML в качестве таблицы стилей. Это было показано, чтобы включить ряд различных атак, включая межсайтовый скриптинг (XSS) и эксфильтрацию токенов CSRF.
файл webpack.config
/* eslint-disable global-require */
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackCleanupPlugin = require('webpack-cleanup-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpackBundleAnalyzer = require('webpack-bundle-analyzer');
process.env.NODE_ENV = 'production';
module.exports = {
mode: 'production',
target: 'web',
entry: {
bundle: path.join(__dirname, 'src', 'index.jsx'),
},
output: {
path: path.join(__dirname, 'build'),
publicPath: '/',
filename: '[name].[contenthash].js',
},
devtool: 'source-map',
resolve: {
modules: [path.resolve(__dirname, 'src'), 'node_modules'],
},
module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: /node_modules\/(?!objectmodel).+/,
loader: 'babel-loader',
resolve: {
extensions: ['.js', '.jsx'],
},
},
{
test: /\.(s[ac]ss|css)$/i,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: { sourceMap: true },
},
{
loader: 'sass-loader',
options: { sourceMap: true },
},
{
loader: 'postcss-loader',
options: {
plugins: () => [require('cssnano')],
sourceMap: true,
},
},
],
},
{
test: /\.(pdf|ico|png|jpg|svg)$/,
use: 'file-loader?name=assets/[name].[ext]',
},
],
},
plugins: [
new WebpackCleanupPlugin(),
new webpackBundleAnalyzer.BundleAnalyzerPlugin({ analyzerMode: 'static' }),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
}),
new HtmlWebpackPlugin({
filename: 'index.html',
favicon: 'src/favicon.ico',
template: path.join(__dirname, 'src', 'index.html'),
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}),
],
};