Overcomplicated @rails/webpacker package?

[joroshiba]

I love that this just works out of the box, but configuring it after that leaves a lot to be desired.

The basis of the problem being that generally webpack will need some configuration and it is currently 90% extracted out into a node module, and I could start from scratch but it already mostly works.

Maybe I'm missing something, but it seems like you could have a much simpler easy to extend, well documented by webpack configuration with a webpack.base.config.js that is simply extended in dev, test, prod file. Instead it is using a yarn package with and environment class that builds an object and requires me to read the code of the yarn package to change. (The current webpacker documentation here says to look at webpack for configuration information, but that isn't particularly useful IMO when you have built helper libraries to build the config object.)

[renchap]

You can easily add your own Webpack plugins / loaders, see here: https://github.com/rails/webpacker/blob/master/docs/webpack.md
This does not solve the problem to see what the default Webpack config is, but IMO adding your own bits is quite easy.

[joroshiba]

I looked at this, but it did not allow me to do what I needed to (specifically I need to set the order that loaders are ordered in). I ended removing the package entirely and building my own webpack config.

[gauravtiwari]

Hey, working on a PR that adds same feature you are looking for - #884

Perhaps, we can also have an eject feature that copies over config files from npm module to your app for customisation.

[gauravtiwari]

@bytewalls Merged #884 and here is the new API:

// environment.js

environment.loaders.append('json', jsonLoader)
environment.loaders.prepend('json', jsonLoader)
environment.loaders.insert('json', jsonLoader, { after: 'style' } )
environment.loaders.insert('json', jsonLoader, { before: 'babel' } )
// Same API for plugins
environment.plugins.insert('Manifest', /* manifestPlugin instance */, { before: 'ExtractText' } )

// Same for resolved modules
environment.resolvedModules.prepend('vendor', 'vendor')

module.exports = environment

environment.config now returns webpack config object:

// environment.js

const environment = require('@rails/webpacker')

environment.config = // {} webpack config object

environment.config.set('resolve.extensions', ['.foo', '.bar'])
environment.config.set('output.filename', '[name].js')
environment.config.delete('output.chunkFilename')
environment.config.get('resolve')

// Just merge as you would do with webpack-merge
environment.config.merge({ output: {
    filename: '[name].js'
  }
})

module.exports = environment