Open
Description
Current behaviour 💣
Not sure if a bug, but could do with some advice either way as it is difficult to tell what is causing this.
I have HTMLWebpackPlugin setup such that is uses an .ejs template. Within this template I have the nonce="NONCE" attribute on each of the <script /> elements. However, in the compile .html file, these attributes are missing. I had read that the minify option might be causing this, but I set this to false and the attributes are still being removed.
Here if the configuration of the plugin within my Webpack config file:
new HtmlWebpackPlugin({
template: './src/core/html/index.ejs',
baseHref: '/',
minify: false,
appMountIds: ['react-app', 'portal-root'],
favicon: 'src/assets/favicon.ico',
inject: true,
}),
Expected behaviour ☀️
I would expect there an option to prevent either all or specific attributes from being removed.
Reproduction Example 👾
webpack config
import path from 'path';
import { fileURLToPath } from 'url';
import HtmlWebpackPlugin from 'html-webpack-plugin';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const APP_DIR = path.resolve(__dirname, 'src');
const BUILD_DIR = path.resolve(
__dirname,
'..',
'server',
'static'
);
const entry = {
app: [APP_DIR + '/app.js'],
};
const webpackModule = {
rules: [
{
test: /\.js$|\.jsx$/,
include: [/tidee-life-ui/, /tidee-life-theme/, /src/],
loader: 'babel-loader',
options: {
rootMode: 'upward',
},
},
],
};
const output = {
chunkFilename: '[name].bundle.js',
filename: '[name].[contenthash].bundle.js',
path: BUILD_DIR,
publicPath: '',
};
const plugins = [
new HtmlWebpackPlugin({
template: './src/core/html/index.ejs',
baseHref: '/',
minify: false,
title: 'tidee.com',
appMountIds: ['react-app'],
favicon: 'src/assets/favicon.ico',
inject: true,
}),
];
const resolve = {
extensions: ['.js', '.jsx'],
modules: [
path.resolve(__dirname, 'node_modules'),
],
};
export default {
BUILD_DIR,
devtool: 'source-map',
entry,
mode: 'development',
module: webpackModule,
output,
plugins,
resolve,
};
index.ejs
<% var item, key %><%
htmlWebpackPlugin.options.scripts = htmlWebpackPlugin.options.scripts || []
%><!DOCTYPE html>
<html>
<head></head>
<body>
<div id="react-app"></div>
<%
for (item of htmlWebpackPlugin.options.scripts) { %><%
if (typeof item === 'string' || item instanceof String) { item = { src: item, type: 'text/javascript' } } %>
<script<% for (key in item) { %> <%= key %>="<%= item[key] %>"<% } %> nonce="NONCE"></script>. <% } %>
</body>
</html>
Environment 🖥
Node.js 20.12.0
darwin 20.6.0
npm 10.8.1
webpack 5.99.9
html-webpack-plugin 5.6.3
Metadata
Metadata
Assignees
Labels
No labels