Config Recipes

weijiekoh edited this page May 12, 2018 · 9 revisions

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 (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: `*.*` }]) );
}
Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.