Config Recipes

Some common recipes for use in preact.config.js

See webpack-helpers for reference on helpers argument.

Customising babel options (using loader helpers)

To customize babel config babel-loader options have to be changed.

export default (config, env, helpers) => {
  let { rule } = helpers.getLoadersByName(config, 'babel-loader')[0];
  let babelConfig = rule.options;
  
  babelConfig.plugins.push('my-chosen-plugin');
  babelConfig.env = { 
    // ...some settings... 
  }
};

Disabling source maps (using plugin helpers)

export default (config, env, helpers) => {
  let { plugin } = helpers.getPluginsByName(config, "UglifyJsPlugin")[0];
  plugin.options.sourceMap = false
}

Conditional changes based on env

export default (config, env, helpers) => {
  if (env.ssr) {
    // ...do sth for prerender...
  } else {
    // ...do sth for regular bundles...
  }

  if (env.production) {
    // ...do sth for production...
  } else {
    // ...do sth for watch mode...
  }
}

Setting proxy for dev server (using config directly)

export default function (config, env, helpers) {
  config.devServer = {
    quiet: true,
    proxy: [
      {
        path: '/api/**',
        target: 'http://api.example.com',
        // ...any other stuff...
      }
    ]
  }
}

Removing plugin, loader or rule

Each wrapper for plugin, loader or rule comes with it's position in array so that it can be easily removed.

export default (config, env, helpers) => {
  let { index } = helpers.getPluginsByName(config, 'some-plugin')[0]
  config.plugins.splice(index, 1)
};

Merge static assets with the /build folder

This config will take all files (not folders) at the root of /src/assets and copy them into the build folder (configurable using --dest). This means, /src/assets/robots.txt will be copied to /build/robots.txt (instead of /build/assets/robots.txt) and thus will be available at www.example.com/robots.txt.

First: npm install --save-dev copy-webpack-plugin

import CopyWebpackPlugin from 'copy-webpack-plugin'

export default config => {
    config.plugins.push( new CopyWebpackPlugin([{ context: `${__dirname}/src/assets`, from: `*.*` }]) );
}