Webpack does not recognize new files (maybe batch file creation issue?)

[Kokujou]

Bug report

I have a typescript project, that i develop with VSCode.
In the workspace i have a task configured that automatically runs. this is webpack --watch.
there is no static entry file, rather I've used glob to simply tell webpack "bundle all TS" files, as it's a webcomponent project

my webpack config:

const path = require('path');
const { glob } = require('glob');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: glob
        .sync('./**/*.ts', { ignore: ['**/node_modules/**', '**/dist/**', '**/templates/**'] })
        .map((x) => './' + x), // Verwende glob, um alle .tsx-Dateien im src-Ordner zu finden
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: [
                    {
                        loader: 'ts-loader',
                        options: {
                            transpileOnly: true,
                        },
                    },
                ],
                exclude: [/node_modules/, /dist/],
            },
        ],
    },
    resolve: {
        extensions: ['.ts', '.js'],
        alias: {
            'lit/decorators': path.resolve(__dirname, './node_modules/lit/decorators.js'),
        },
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    // plugins: [new LitAnalyzerPlugin()],
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'index.html',
        }),
        new webpack.HotModuleReplacementPlugin(),
    ],
    devServer: {
        static: {
            directory: path.join(__dirname, 'dist'),
        },
        hot: true,
    },
    devtool: 'source-map', // Fügt Source Maps hinzu
    watch: true,
};

What is the current behavior?

If i change any file that already exists, it works well. but if i create a new file, it doesn't detect that a new file is part of my solution. especially because customElements don't require imports in my scenario. this means now i need to restart webpack/my whole vscode to make it detect the changed files.

If the current behavior is a bug, please provide the steps to reproduce.

What is the expected behavior?

webpack should detect that the entries have changed and simply load the additional dependencies.

Other relevant information:
webpack version: ^5.95.0
Node.js version: v20.14.0
Operating System: Windows 10
Additional tools: vscode + IIS

[alexander-akait]

That's expected because of:

glob.sync

This function is launched once at startup, so it does not detect further changes. You can create your own loader for these purposes for entry point to solve it:

const path = require('path');
const { glob } = require('glob');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/entry.js'
    module: {
        rules: [
            {
                test: /entry\.ts$/,
                use: [
                    {
                        loader: 'ts-loader',
                        options: {
                            transpileOnly: true,
                        },
                    },
                   {
                        loader: require.resolve('./loader/entry-loader.js'),
                    },
                ]
            },
            {
                test: /\.ts$/,
                use: [
                    {
                        loader: 'ts-loader',
                        options: {
                            transpileOnly: true,
                        },
                    },
                ],
                exclude: [/node_modules/, /dist/],
            },
        ],
    },
    resolve: {
        extensions: ['.ts', '.js'],
        alias: {
            'lit/decorators': path.resolve(__dirname, './node_modules/lit/decorators.js'),
        },
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    // plugins: [new LitAnalyzerPlugin()],
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'index.html',
        }),
        new webpack.HotModuleReplacementPlugin(),
    ],
    devServer: {
        static: {
            directory: path.join(__dirname, 'dist'),
        },
        hot: true,
    },
    devtool: 'source-map', // Fügt Source Maps hinzu
    watch: true,
};

entry-loader.js

const path = require("path");

module.export = function loader() {
  const dir = path.resolve(this.rootContext, './src/entries');
  const files = glob
        .sync(`${dir.replace(/\\/g, '/')}/**/*.ts`, { ignore: ['**/node_modules/**', '**/dist/**', '**/templates/**'] })
        .map((x) => 'import ' + JSON.stringify(x));
this.addContextDependency(dir);
return files.join("\n")
}

This is a sample code so there may be errors in the paths because I don't know the structure of your project, but the idea of ​​solving this is this

Feel free to feedback

[Kokujou]

@alexander-akait okay thanks to you i think i figured it out
i had a problem with recursion after implementing this solution, but i think that was due to the hot reload plugin, it kept generating countless of those main.id files
for now i shifted it to only run in the devServer section, but i'm not sure if this is the right thing, please tell me if you have any thoughts on that.

[alexander-akait]

I think I forgot this:

{
                test: /\.ts$/,
                use: [
                    {
                        loader: 'ts-loader',
                        options: {
                            transpileOnly: true,
                        },
                    },
                ],
                exclude: [/node_modules/, /dist/, test: /entry\.ts$/],
            },

also you don't need new webpack.HotModuleReplacementPlugin() if you have hot: true

[Kokujou]

@alexander-akait i did already exclude the generated entry.ts, it was still coming, and it was always mentioning those main files that are generated i think when caching?
main.6b3b50cb1f1a2861efa0.hot-update.js for example.

[alexander-akait]

Do you have any other files in const dir = path.resolve(this.rootContext, './src/entries');?

main.6b3b50cb1f1a2861efa0.hot-update.js for example.

No, this is not a problem?

Can you make a reproducible example, I will try to help?

[Kokujou]

@alexander-akait thanks and... basically you already have my configuration, that's the most important part, after that i was just running webpack --watch and that's it. (with mode=development)

what happens is every x milliseconds a new hot-reload file is being generated, without me actually doing anyhting.

but it shouldn't get processed... because we only specified .ts as a possible ending, and we even explicitly excluded the dist folder, where the stuff is lying in.

no idea why it was happening... for now i don't need hot reload so i shifted it to the devServer section, but it'd be nice to get it running

[alexander-akait]

@Kokujou I tried to reproduce the problem locally but everything works fine for me, here is what I use:

webpack.config.js

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
	mode: "development",
	entry: "./src/all-entries.ts",
	module: {
		rules: [
			{
				test: /all-entries\.ts$/,
				use: [
					{
						loader: "ts-loader",
						options: {
							transpileOnly: true
						}
					},
					{
						loader: require.resolve("./entry-loader.js")
					}
				]
			},
			{
				test: /\.ts$/,
				use: [
					{
						loader: "ts-loader",
						options: {
							transpileOnly: true
						}
					}
				],
				exclude: [/node_modules/, /dist/, /all-entries.ts/]
			}
		]
	},
	resolve: {
		extensions: [".ts", ".js"],
		alias: {
			"lit/decorators": path.resolve(
				__dirname,
				"./node_modules/lit/decorators.js"
			)
		}
	},
	output: {
		clean: true,
		filename: "bundle.js",
		path: path.resolve(__dirname, "dist")
	},
	// plugins: [new LitAnalyzerPlugin()],
	plugins: [
		new HtmlWebpackPlugin({
			template: "./index.html",
			filename: "index.html"
		})
	],
	devServer: {
		static: {
			directory: path.join(__dirname, "dist")
		},
		hot: true
	},
	devtool: "source-map", // Fügt Source Maps hinzu
	watch: true
};

entry-loader.js

const path = require("path");
const glob = require("glob");

module.exports = function loader() {
	const dir = path.resolve(this.rootContext, "./src/entries");
	const files = glob
		.sync(`${dir.replace(/\\/g, "/")}/**/*.ts`, {
			ignore: ["**/node_modules/**", "**/dist/**", "**/templates/**"]
		})
		.map(x => `import ${JSON.stringify(x)}`);

	console.log(files);

	this.addContextDependency(dir);
	return files.join("\n");
};

src/all-entries.ts

Just empty file, but created

src/entries/my-entry.ts

console.log("test")

Works great and for watching and for dev server. Pay attention to the paths - src/entries is a separate folder, because if you store everything in one, then any changes in the folder can cause a cycle.

[Kokujou]

@alexander-akait you're right it works now even with serve :) thanks for all your help and time! i think my issues are now all sorted out!