Preact-cli: Ejecting from default

[JarLowrey]

Create-react-app allows users to npm run eject from the default config, copying build config to a local dir and running webpack from that - more info.

Any chance of that coming to preact?

[developit]

Not super likely - preact-cli is a lot more complex than a pre-built webpack config, it actually runs webpack and changes how things work under the hood.

FWIW, we added preact.config.js to support this exact use-case: you can export a function from that file that does anything you want to the CLI's internal webpack config.

[lukeed]

Not sure that I really understand the need for this. You just want to take a look at what the current webpack configuration is?

[JarLowrey]

Yeah I was thinking of using this as a launching off point in my webpack, and configure as needed. It looks like that's how react does it. If that's not possible in preact without a preact-cli dependency that's fine.

[JarLowrey]

For example, I'd like to use react-toolbox now but need to use preact-compat in order to do so. I don't see a way to set up this plugin through preact.config.js, or am I missing something?

[lukeed]

You just have to install preact-compat and start using React-based libraries. All of the aliasing work is done for you internally.

[JarLowrey]

Ok cool. Not sure where the use case would come in then, but I thought that ejecting would be a 'nice to have'.

[developit]

Ah - so that comes around to something I'd love for us to support: using preact-cli as a node module that generates webpack configs.

// webpack.config.js
let preactCli = require('preact-cli');

module.exports = preactCli.config({ options: 'here' })

[ChristianUlbrich]

The folks from angular/cli did also object against extracting the webpack config, because they always toyed around with the idea of actually _changing_ their bundler and thus did not want people relying on a specific config for a specific tool.

However, as you already directly expose the underlying webpack config through preact.config.js I do not see, why you would not enable ejecting or at least _generating_ the actual webpack config that is used internally. As all plugin development is de facto "just" modifications to the webpack config it is very cumbersome to reverse-engineer the actually used webpack configuration to modify it.

Something along:

// preact.config.js
export default function (config, env, helpers) {

  fs.writeFileSync('webpack-config.json', JSON.stringify(config, function(key, value) {
   // expose RegEx as Strings, to figure out test props for webpack loader activation 
   if (value instanceof RegExp) {
      return value.toString();
    }
    return value;
  }, 4));

}

at least allowed me to find the places, where to replace the configuration for my own "plugin" for preact-cli ...

In the end, angular/cli gave in and now supports ejecting the webpack config.

[developit]

Unfortunately, it's not possible to stringify a webpack configuration. The configuration used by preact-cli is complex and includes a number of references to functions contained in the preact-cli repo.