HtmlWebpackPlugin chunks is not injecting given array of js files in body or head.

[konduri123]

Current behaviour 💣

I was generating HTML pages dynamically using htmlwebpack plugin here is the sample code, which was trying to include multiple script tags using chunks parameter.

`
const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const glob = require("glob");
const ReplaceInFileWebpackPlugin = require("replace-in-file-webpack-plugin");
const entryArray = glob.sync("src/components/**/index.js");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const { WebPlugin, AutoWebPlugin } = require('web-webpack-plugin');

const commonScripts = glob
.sync("./src/js/*.js")

console.log('commonScripts', commonScripts);
const envKeys = Object.keys(process.env).reduce((prev, next) => {
prev[process.env.${next}] = JSON.stringify(process.env[next]);
return prev;
}, {});

let htmlwebpackArray = [];
const entryObject = entryArray.reduce((acc, item) => {
item = __dirname + "/" + item;
let name = item.replace("/index.js", "");
name = name.replace(__dirname + "/src/components", "");
name = name.replace("/", "");
acc[app/js/ + name] = item;
htmlwebpackArray.push(
new HtmlWebpackPlugin({
inject:'body',
template: './src/index.html',
filename: ./app/view/ + name + ".html",
chunks: Object.values(commonScripts).concat([app/js/ + name]),
}),
);
return acc;
}, {});
console.log('============chunks',htmlwebpackArray[0]["userOptions"].chunks);
console.log('============chunks',htmlwebpackArray[0]);

module.exports = {
entry: entryObject,
output: {
path: path.resolve(__dirname, "./client/dist"),
publicPath: "/",
filename: "[name].js",
},
plugins: [
new webpack.DefinePlugin(envKeys),
new CleanWebpackPlugin({ verbose: true, cleanAfterEveryBuildPatterns: [] }),
new MiniCssExtractPlugin({
filename: "[name].css",
}),
new CopyPlugin({
patterns: [
{ from: "./src/js/a.js", to: "./app/js/a.js"},
{ from: "./src/js/b.js", to: "./app/js/b.js"},
]
}),
...htmlwebpackArray,
],
resolve: {
extensions: [".js"],
},
devtool: "source-map",
devServer: {
contentBase: path.join(__dirname, "./client/dist/"),
port: 9000,
disableHostCheck: true,
},
externals: {
jQuery: "jQuery",
},
};
`

Here is the code base deployed

https://codesandbox.io/s/headless-shadow-ks4zu?file=/webpack.config.js

But when I gave an array of single files, the chunk included it. But an array of multiple script files was failed to include the given list of files.

Expected behaviour ☀️

I am expecting the chunks options should process the [] of js files and add them as multiple script tags in head or body.

And also inject options to should not be per Htmlwebpack plugin object. It should be per file.

Reproduction Example 👾

Environment 🖥

[alexander-akait]

Closing due to inactivity. Please test with latest version and feel free to reopen if still regressions. Thanks!