Implement new config

Historically, the configuration has been done through the file webpack.haul.js. This proposal aims to achieve 2 things,

1. Simplify configuring commonly needed features, such as including folders for transpilation
2. Separate webpack configuration so that other tools can use it, e.g. - eslint-resolver-webpack
3. Have flexibility to configure Haul’s options independent from Webpack

With the proposed approach, configuration will be done through a file called haul.config.js, which will look kinda like this:

export default {
  // haul specific options
  webpack: {
    // webpack configuration
  }
}

This allows us to have the flexibility to add additional options which are unrelated to webpack, and also allows us to switch the bundler to a different one in future.

The webpack field can be a plain object with webpack configuration, or a function which receives various arguments:

export default {
  // haul specific options
  webpack: ({ platform, production }) => ({
    // return custom config
  });
}

This mirrors a vanilla webpack config and it’s env argument. This makes it so that other tools can understand the webpack config. One could also extract the webpack configuration to a separate file (e.g. - webpack.config.js) which other tools can read.

Currently we pass a second argument defaults, which is convenient, but makes the config incompatible with tools which require vanilla webpack config. We’ll continue to support it, but we can also export a helper utility in case you need to support those tools:

import { createWebpackConfig } from 'haul';

export default {
  webpack: createWebpackConfig(({ platform }) => {
    entry: `./index.${platform}.js`,
    include: /node_modules/,
  }),
}

The createWebpackConfig utility can take some common options has return a webpack configuration function which takes the env argument. To override configurations from a confguration generated this way, you could do something like this:

import { createWebpackConfig } from 'haul';

export default {
  webpack: env => {
    const config = createWebpackConfig({
      entry: `./index.js`,
      include: /node_modules/,
    })(env);

    config.plugins.push(new CaseSensitivePathsPlugin());

    return config;
  },
}

[jukben]

As a team member of our Callstack Open Source Division – I’m on it. 💪

[thymikee]

Closed via #372