I'm using react-scripts
4.0.3 and react-app-rewired
2.1.6 to make some adjustments to the webpack config.
I want to alter some attributes of the script tags that are generated and injected into index.html
. I'm using alterAssetTags
hook of the HtmlWebpackPlugin
.
class MyPlugin {
apply(compiler) {
compiler.hooks.compilation.tap('MyPlugin', compilation => {
console.log('compilation'); // <- this is executed
HtmlWebpackPlugin.getHooks(compilation).alterAssetTags.tap('MyPlugin', data => {
console.log('adjust tags'); // <- not executed
});
});
}
}
This is my config-overrides.js
:
const { override, addWebpackPlugin, babelInclude } = require("customize-cra");
module.exports = function (config, env) {
return Object.assign(
config,
override(
addWebpackPlugin(new MyPlugin()),
babelInclude([
path.resolve('src'), // don't forget this
])
)(config, env)
);
};
Problem
The problem is, that alterAssetTags
is not called during the build process (but the compilation
hook is).
However, if I replace the existing HtmlWebpackPlugin
of create-react-app, everything works as expected.
const htmlWebpackPluginIndex = config.plugins.findIndex(plugin => plugin.constructor.name === 'HtmlWebpackPlugin');
const newHtmlWebpackPlugin = new HtmlWebpackPlugin({
...config.plugins[htmlWebpackPluginIndex].options,
});
// Replace the original HtmlWebpackPlugin with the new instance
config.plugins.splice(htmlWebpackPluginIndex, 1, newHtmlWebpackPlugin);
config.plugins.push(new MyPlugin());
This is not a solution though, because the generated index.html
differs.
Question
What could be the issue, that alterAssetTags
is not called?