Files added to compilation.compilationDependencies don't trigger a rebuild via --watch

reopening closed issue: #10674 with more info

Bug report

When adding dependencies to webpack manually using compilation.compilationDependencies and then using --watch when you change the file you added a dependency for Webpack does not trigger a rebuild.

This is also an issue with contextDependencies and using fileDependencies

According to @evilebottnawi it should be supported.

What is the expected behavior?

For all the dependencies you’ve added it should trigger a rebuild whenever you change those files.

Example code

const path = require('path');

/**
 * Manually list dependencies here to automatically rebuild if any of these files change.
 * This is useful for files in the chain that webpack isn't aware of.
 */
const addDepPaths = [
	'some_external_dep_webpack_doesnt_know_about_due_to_external_tooling.js'
];

module.exports = {
	entry: {
		site: './test.js'
	},

	output: {
		path: __dirname + '/test',
		filename: 'js/[name]-[contenthash].js'
	},

	mode: 'development',

	plugins: [{
		apply: function(compiler) {
			compiler.hooks.compilation.tap('add-deps:compilation', function(compilation) {
				addDepPaths.forEach(function(depPath) {
					compilation.compilationDependencies.add(path.join(compiler.context, depPath));
				});
			});

			compiler.hooks.afterEmit.tap('add-deps:afterEmit', function(compilation) {
				addDepPaths.forEach(function(depPath) {
					compilation.fileDependencies.add(path.join(compiler.context, depPath));
				});
			});

			compiler.hooks.afterEmit.tap('add-deps-using-contextDependencies:afterEmit', function(compilation) {
				addDepPaths.forEach(function(depPath) {
					compilation.contextDependencies.add(path.join(compiler.context));
				});
			});
		}
	}]

};

https://github.com/garygreen/webpack-dep-problem

Note: this is example code, please don’t comment about how you should be using import some_external... in test.js because we have a need to add a dependency in our plugin/workflow that Webpack simply doesn’t see due to external tooling.

Other relevant information: webpack version: 4.41.5

[garygreen]

I’ve added some more examples including the one you linked to which copy-webpack-plugin uses - it doesn’t seem to work unfortunately.

Can you clarify, if you add those dependencies should the --watch command rebuild when you make any changes to those dependencies? That is my understanding, though I could be mistaken.

Here’s a reproducible repository with everything you need: https://github.com/garygreen/webpack-dep-problem

[garygreen]

@sokra thank you so much for you help on this, it’s much appreciated 💑

The examples you provided are of great help. In addition I’ve discovered that Node caches any require statements so that meant any changes to those files that were required/imported were only being processed once even though Webpack was trying to rebuild as it was added as dependency.

So for anyone else stumbling across this issue the below helper should come in handy:

dep-plugin.js

// It's possible to tell Node to remove a module from it's cache.
// This function allows you to require without using the cache.
function requireUncached(module) {
    delete require.cache[require.resolve(module)];
    return require(module);
}

module.exports = postcss.plugin("postcss-dep-plugin", function (configPath) {
    return function (root, result) {
      var theme = requireUncached(configPath);

      // do whatever you want with the theme

      result.messages.push({
        type: "dependency",
        file: configPath // this needs to be a exact path, including `.js` I believe.
      });
    };
});

site-theme.js

function theme() {
   return {
       'text-blue': 'blue',
   }
}

module.exports = theme;

postcss.config.js usage:

const path = require('path');

module.exports = {
    plugins: [
       require('./dep-plugin')(path.resolve(__dirname, './site-theme.js')) // make sure to provide exact path.
   ]
}