webpack - MiniCssExtractPlugin set absolute path for .css file - css

Question

remove relative URLs and use absolute URLs in CSS imports.
webpack code -
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
}),
bundle file in html is
this is relative path but i want to set abosolute path to this .css url from webpack config file using MiniCssExtractPlugin
Impact
An attacker may trick browsers into importing JavaScript or HTML code as a stylesheet. This has been shown to enable a number of different attacks, including
cross-site scripting (XSS) and exfiltration of CSRF tokens.
webpack.config file
/* 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,
},
}),
],
};

Answer 1

You can change your output.publicPath to the absolute prefix, it will change all of your assets (in html, in css) to be prefixed with it.
output: {
path: path.join(__dirname, 'build'),
publicPath: 'https://my-cdn.com/',
filename: '[name].[contenthash].js',
},