Webpacker: Add API to update an environment's resolve.modules

[n0nick]

Webpack config's resolve.modules is determined in an un-exposed function within environment.js, that is called from toWebpackConfig().
Therefore it is always "too late" within an app's config/webpack/*.js files to customize this setting.

I realize I have resolved_paths in webpacker.yml for that, but the problem arises when I needed to determine path values dynamically on build time. Specifically for me, the case was adding paths to assets within gems.

I ended up wrapping environment.toWebpackConfig() like so:
https://gist.github.com/n0nick/b18a7978b8f27f56fe1bda33ff11ebd7
Which works, but it might be nice to have a clean API to add to resolve.modules.

[molefrog]

Have the same problem trying to extend resolve.plugins (it's rarely used, but that's the only way to plug in DirectoryNamedWebpackPlugin). For sure, as a workaround I could write a function that wraps every environment.toWebpackConfig() invocation and merges the config, but this makes the whole point of having smart Environment object pointless.

Problem is: we can add support for both resolve.modules and resolve.plugins using the same approach they used for loaders and plugins and even submit a PR, but chances are they will get more requests from people to support more fields like that. So that's what I'm proposing: add a mechanism to extend the config in the Enviroment object using custom rules (middlewares? layers?).

[n0nick]

I agree, this is partly why I didn't submit a PR - there are probably many other use cases. So I'd appreciate a more generic API to update an environment's properties.

[gauravtiwari]

@molefrog @n0nick Yeah, probably best to expose the base config object itself so anything can be added to that directly before calling toWebpackConfig(). Would that work?

[molefrog]

@gauravtiwari Generally, yes. Ideally, I would like to do something like: environment.merge({ resolve: { plugins: [ ... ] }}), but as I understand you're not planning to add webpack-merge as a dependency (and it totally makes sense). So maybe something like:

// Part of development.js, webpack-merge is optional here
const merge = require('webpack-merge')

environment.transformBaseConfig(config => merge(config, {}))

Anyways, even if you just make base config accessible via environment.baseConfig that would work too! Also, let me know if you need help implementing that, I would love to help.

[gauravtiwari]

Yeah, started putting together something here, which would allow you to do above things inside environment.js or any other environment (if specific to that): https://github.com/rails/webpacker/compare/extendable-base-config

// environment.js
environment.resolvedModules.set('vendor', resolve('vendor'))
environment.config.output.publicPath = '/packs/'