[Bug] Question: Trigger webpack rebuild

[AustinGil]

This is just a question:

Is there a way to trigger Webpack to trigger a recompile on file changes? I've got a JavaScript module that builds out CSS. That's what I'm loading as a virtual module.

I've got mine building fine, but when I make changes to my file they are not showing up in my dev work. I have to restart webpack.
I've even tried using the webpack-watch-files-plugin to watch for changes and it looks like that is running fine, but my CSS changes do not get incorporated.

Additional context

The CSS module is being loaded the same way as in this thread: #70

[non25]

@AustinGil maybe you will find this approach helpful: sveltejs/svelte-loader#151

[Airkro]

#76

maybe relate, turn off cache might work

[ethangodt]

@AustinGil in the same boat. Did you find a solution for this?

[harlan-zw]

Specifically disabling the cache for the loader of the virtual module fixed my issue, this was only a problem for webpack 5 though

  this.cacheable(false)

Feel free to look through https://github.com/windicss/windicss-webpack-plugin if you want to see it In action

[n8tz]

Hi there,

I have a (hacky) way :) ..
To specifically force rebuilds of a module :

	compiler.hooks.compilation.tap('layer-pack', ( compilation, params ) => {
			let toBeRebuilt = [];
			
			// force rebuild in wp5 
			compilation.buildQueue &&
			compilation.buildQueue.hooks &&
			compilation.buildQueue.hooks.beforeAdd
			           .tapAsync('layer-pack',
			                     ( module, cb ) => {
				                     if ( toBeRebuilt.includes(module.resource) ) {

					                     toBeRebuilt.splice(toBeRebuilt.indexOf(module.resource), 1);

					                     module._forceBuild = true; // <- this will force rebuilding the module
				                     }
				                     cb()
			                     }
			           );
			//  
			// put the path names of the virtual modules that were updated in toBeRebuilt


			
		})

Using my plugin, layer-pack with big project (and too much deps) webpack do an endless loop when using fileDependencies & contextDependencies to specify fs watchs
In some other case it just do 1 useless rebuilt.

So i found another hacky way to watch things; if the "file/contextDependencies" method doesn't work for you either :

			       compiler.hooks.afterDone
			        .tap('layer-pack', ( { compilation } ) => {
				
				        // fix wp5 
				        compiler.options.watch
				        && process.nextTick(
					        tm => {
						        compiler.watchFileSystem.watcher.watch([/* files to watch */], [/* directories to watch */])
					        }
				        )
				
			        });

For more infos, you can see my code at https://github.com/layer-pack/layer-pack/blob/64db4bedd6d3245f69bffb6c3bcc0a9cefac8252/src/layerPackPlugin.js#L786

Hope it help :)

[JiangWeixian]

My project generate routes based file system, and write react routes object into virtual module.

I meet same issue, create new file didn't trigger rebuild, even write module on file add event.

compiler.hooks.compilation.tap(VMRoutesWebpackPluginName, async compiliation => {
  compiliation.contextDependencies.add(path.resolve(process.cwd(), 'src/pages'));
});

above code solve my problem, hope it help

[larixer]

Closing the issue as stale, please retest on latest webpack-virtual-modules and reopen with reproduction steps if the issue still exists.