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(require.resolve('my-chosen-plugin'));
  babelConfig.env = { 
    // ...some settings... 
  }
};

Disabling source maps (using plugin helpers)

export default (config, env, helpers) => {
  if (env.isProd) {
    config.devtool = 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 (config, env, helpers) => {
  config.devServer.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 path from 'path'
import CopyWebpackPlugin from 'copy-webpack-plugin'

export default config => {
    config.plugins.push({
        patterns: [
          {
            from: '*.*',
            context: path.resolve(__dirname, 'src/assets'),
          },
        ],
      });
}

Absolute Imports

It is sometimes annoying to write ../../../components/App.js when you have a nested directory structure. This will help you to import like components/App.js.

import { lstatSync, readdirSync, existsSync } from 'fs';

const isDirectory = source => lstatSync(source).isDirectory();
const getDirectories = source =>
    readdirSync(source).map(name => path.join(source, name)).filter(isDirectory);

getDirectories('src/').map((dir) => {
    config.resolve.alias[dir.replace('src/', '')] = path.resolve(__dirname, dir);
});

Now you can easily import any subdirectory or src. See #934

Use environment variables in your application

If you'd like to reference and use environment variables in your application, you will need to use DefinePlugin.

import { DefinePlugin } from 'webpack';

export default {
    webpack(config, env, helpers, options) {
        config.plugins.push(
            new DefinePlugin({
                'process.env.MY_VARIABLE': JSON.stringify('my-value'),
            }),
        );
    }
}

This will replace every usage of process.env.MY_VARIABLE in your code with 'my-value'.