Including scripts twice, when used with HTMLWebpackPlugin.

[KPSoftec]

Include scripts twice when used with HTMLWebpackPlugin and no HTML-loader.

new HtmlWebPackPlugin({
title: appTitle,
templateParameters: {
title: appTitle,
},
favicon: './src/assets/img/favicon.ico',
template: './src/index.html',
filename: './index.html',
inject: 'body',
base: process.env.BUILD_DOMAIN === 'release' ? /${appName}/ : '/',
}),
new HtmlWebpackTagsPlugin({
scripts: 'config/env.js',
}),

Versions ->
"copy-webpack-plugin": "^6.0.1",
"html-webpack-plugin": "^4.3.0",

Getting this as output

[jharris4]

Usually when you get tags twice it's because of the content your html template, or because webpack was already injecting the file.

Can you check that whether the duplicate file is still being added if you remove it from the scripts option, and also double check whether changing the inject: 'body' setting makes a difference.

[KPSoftec]

I tried this with inject:body as commented.
But its still including two files.
I m not using any HTML loader.

"clean-webpack-plugin": "^3.0.0",
"compression-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^6.0.1",
"html-webpack-plugin": "^4.3.0",
"html-webpack-tags-plugin": "^2.0.17",
"file-loader": "^6.0.0",

HTML TEMPLATE

Here is my complete webpack.conf.
Please try at your end.

`const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const HtmlWebpackTagsPlugin = require('html-webpack-tags-plugin')
const CompressionPlugin = require('compression-webpack-plugin')

const { root } = require('../helpers') // you can use your own root method.
const { appName, appTitle } = require('../constants/const.config')

module.exports = {
entry: {
app: './src/app/index.jsx',
},
// Tell Weback to output our bundle to ./build/js/bundle.js
output: {
path: root('build'),
filename: 'js/[name].[hash:8].js',
publicPath: '',
pathinfo: true,
},
resolve: {
extensions: ['.js', '.jsx'],
modules: [root('src'), 'node_modules'],
},
module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
include: [root('src'), root('config/helpers')],
use: {
loader: 'babel-loader',
},
},
{
test: /.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /.(eot|otf|ttf|woff(2)?)(?[a-z0-9=&.]+)?$/,
loader: 'file-loader?name=assets/font/[name].[hash:8].[ext]',
include: [root('src')],
},
{
test: /.(jpe?g|png|gif|svg)$/,
loader: 'file-loader?name=assets/img/[name].[hash:8].[ext]',
include: [root('src')],
},
{
test: /.ico$/,
loader: 'file-loader?name=assets/img/[name].[ext]',
include: [root('src')],
},
],
},
plugins: [
new CompressionPlugin(),
new CleanWebpackPlugin(),
new CopyWebpackPlugin({
patterns: [{
from: root('./config/tomcat/env.js'),
to: './config',
}],
}),
new HtmlWebPackPlugin({
title: appTitle,
templateParameters: {
title: appTitle,
},
favicon: './src/assets/img/favicon.ico',
template: './src/index.html',
filename: './index.html',
// inject: 'body',
base: process.env.BUILD_DOMAIN === 'release' ? /${appName}/ : '/',
}),
new HtmlWebpackTagsPlugin({
scripts: ['config/env.js'],
append: false,
hash: false,
jsExtensions: ['.js'],
}),
],
}
`

[jharris4]

Can you try removing the HtmlWebpackTagsPlugin from your webpack config and verify if the script/file is still there in your generated html file?

I don't think it can be this plugin that is adding files twice, or else the unit tests would have caught it (ex: https://github.com/jharris4/html-webpack-tags-plugin/blob/master/spec/end_to_end.spec.js#L183)

[savlajubin]

I tried to remove this and the file is not getting included

and when I add it again then it is getting imported twice.

[KPSoftec]

@jharris4

I had found something weird about this package.

Findings-1
I was using "html-webpack-plugin": "^3.2.0", with "html-webpack-tags-plugin": "^2.0.17", In this case the file was getting included only once, and html-loader was also there in webpack configuration ("html-loader": "^0.5.5"). But with this our title and base options was not working which is a part of html-webpack-plugin.

To make title and base options working, i'd updated "html-webpack-plugin": "^4.3.0", after which i need to remove html-loader from webpack to make this title and base work. The reason is when using template option in html-webpack-plugin with html-loader, title and base options are not working.

So after updating the html-webpack-plugin only this multi inclusion of file problem gets generated, So i can say that this is the issue with the combination of html-webpack-plugin and html-webpack-tags-plugin.

Please have a check with the combination of html-webpack-plugin and html-webpack-tags-plugin, If required please include html-loader as well.

Hope this information helps you to debug the package code or find some alternative way of working.

#####################################################################

Findings-2
One more finding is there if we go with this approach then we need to deprecate this html-webpack-tags-plugin, as with this approach there will be no use of this package.
If we don't use html-loader and put a custom option or we can use templateParameters options of html-webpack-plugin, which is already supported by html-webpack-plugin as custom: ['<script src="config/env.js"></script>'], or templateParameters: {}, then in this case we don't need this package any more. And to consume this on html file we can have this using <%= htmlWebpackPlugin.options.custom %>(in case of custom) or <%= scripts %>(in case of templateParameters)

If we start adopting Findings-1 then we have to correct the code, but if we start working with Findings-2 then we need to deprecate this package.

[jharris4]

This plugin IS a plugin for html-webpack-plugin and the test suite has dozens of tests that are run against both version 3 and version 4 of that plugin.

I can try to help you pinpoint if there's something in your webpack configuration that's causing the issue if you provide a link to a repository that reproduces the issue.