Configuration

The webpack.haul.js file is a webpack configuration used by Haul. The simplest config looks like this:

module.exports = {
  entry: './index.js',
};

This works when you have a single index.js as the entry point. But when you have more than one entry point like index.android.js and index.ios.js, or you want to customize the webpack configuration, you can export a function instead of a plain object.

The function will receive options as the first parameter, and the configuration used by Haul as the second parameter.

Options is an object with the following shape:

type Options = {
  platform: 'ios' | 'android', // Current platform
  dev: boolean, // Whether to build for development
  minify: boolean, // Whether to minify the bundle
  bundle: boolean, // Whether building the bundle for packaging
  root: string, // Absolute path to the project root
}

You should return the final configuration object to be used by Haul based on the arguments.

For example, to configure your entry point according to the platform, you can do the following:

module.exports = ({ platform }) => ({
  entry: `./index.${platform}.js`,
});

If you are want to customize the webpack configuration, like loaders etc., define them as usual, and merge the passed configuration in:

module.exports = ({ platform }, defaults) => ({
  entry: `./index.${platform}.js`,
  module: {
    ...defaults.module,
    rules: [
      ...defaults.module.rules,
      {
        test: /\.js$/,
        use: 'custom-loader',
      }
    ],
  },
  resolve: {
    ...defaults.resolve,
    plugins: [...defaults.resolve.plugins, new CustomPlugin()],
    modules: ['src'],
  },
});

See the Webpack website to learn more about configuring Webpack.