feature: Custom config

[rkostrzewski]

Basically this adds support for custom webpack configuration transforms via preact.config.js file.

To do:

• inform user when config provided via CLI was not found
• webpack helpers
• babel preset for preact-cli allow .babelrc & extend from existing config
• update readme

Example config setting custom template:

import path from 'path'

export default (config, env, webpack) => {
	const htmlWebpackPlugin = config.plugins.filter(p => p.constructor && p.constructor.name === 'HtmlWebpackPlugin')[0]
	htmlWebpackPlugin.options.template = '!!ejs-loader!' + path.resolve(__dirname, './template.html')
}

Function exported in preact.config.js would take following parameters:

• config - original webpack config
• env - copy of CLI options (e.g. cwd, production)
• webpack - imported webpack object from webpack blocks (for using webpack plugins & keeping same webpack version as preact-cli uses)

@developit, @cedric-marcone you had an idea to include .babelrc provided in folder.
I don't think it's a good idea without some changes. Current config has some great plugins (e.g. 'babel-plugin-transform-react-constant-elements', 'babel-plugin-transform-react-remove-prop-types') - which would be lost. If there's new cool plugin increasing performance by 100% which the end user doesn't know about he won't be included if preact-cli decides to add it.

I think babel preset that would be preact-cli specific would solve that issue. What do you think?

@thangngoc89 you had an idea to create some helpers, did you have anything specific in mind? I fully agree modifying webpack config is rather painful experience.

My ideas include:

• plugin selector by name (sth like in code above),
• loader selector as loaders could be hidden in module.loaders & module.rules and use, loader, & loaders inside the rule (I guess it could be replaced with sticking to one way of writing rules in original config)

Anywho, waiting for your opinions.

[thangngoc89]

@rkostrzewski

I'm using Webpack 1 terms, but Webpack 2 is pretty much similar

Most of the time, I usually need to do these thing with Webpack config:

• Add/Remove plugins: adding is easy with Object spread but removing is annoying, checking for instance of everywhere
• Add/Remove loaders for each file type: this is pretty hard to work with and most of the time, I wish I could just overwrite loader config for a specific file type than manipulating them.

[developit]

Agreed with point about babelrc - I was actually thinking we'd manually parse it and apply the changes, but that might be somewhat difficult. Curious to hear your thoughts around that.

Maybe we should provide a helper (3rd arg?) for the config mutation function to be able to find a given plugin? like plugin(config, 'HtmlWebpackPlugin').blah = 'foo'? aaaand you already had that idea. I'm getting old you know.

[rkostrzewski]

@developit we're in the luck - babel-loader allows passing presets and babel-config already conforms to babel-preset format.

I've created some helpers - the idea behind them was that given rule index and loader index you can do pretty much everywhere (modify, remove, add).

[rkostrzewski]

env.browsers was never passed here, in babel-preset env argument means something different so I've removed it

[lukeed]

We can't have this. This is the reason for #9. Even though it's been set to false, it wasn't actually making it to the babel compiler.

I have a PR incoming for this.

[rkostrzewski]

Yeah, nah - I've checked this it works for the cases specified in #9, the exlude: [] messes things up - babelrc is innocent 😛.

[lukeed]

Ah, I forgot to come back here and update this comment. 👍

[developit]

i merged the other one before reading this 🤓

[hassanbazzi]

Good stuff dude!

[rkostrzewski]

Babel query got smaller (using preset now rather than passing options object).

[lukeed]

The most anticipated PR of the repo has landed 🛩

[andywillis]

This is great because I just started to use Preact and needed to proxy to Express like I could with CRA. Couldn't figure it out until I read this thread. Thanks! @lukeed

[AlexChalk]

@andywillis How did you manage it?

[andywillis]

@adc17, I used a preact.config.js file with the following (you should adjust it for your requirements):

module.exports = function (config) {
  if (process.env.NODE_ENV === 'development') {
    config.devServer.proxy = [
      {
        // proxy requests matching a pattern:
        path: '/entries',

        // where to proxy to:
        target: 'http://localhost:3001',

      }
    ];
  }
};

There's more information/a better example here.

[josmithua]

Does this support parcel as well as webpack, or just webpack? I can't get it working with parcel...