Plugins

Using Plugins via preact.config.js

To make customizing your configuration easier, preact-cli supports plugins. Plugins are essentially preact.config.js files that are published to npm as modules that you can install. Here's the process:

1. Install it: npm install --save-dev preact-cli-foo

2. Create preact.config.js file in project directory.

3. Invoke the plugin from your preact.config.js:

   import foo from 'preact-cli-foo';
   export default (config, env, helpers) => {
     config = foo(config, helpers);
     return config;
   };

List of Plugins

• preact-cli-plugin-async: Optimized async/await support!
• preact-cli-lodash: Optimize builds using babel-plugin-lodash & lodash-webpack-plugin.
• preact-cli-postcss: Replaces default PostCSS config with your postcss.config.js
• preact-cli-decss: Allows loading of Preact components directly from css files using decss by configuring decss-loader
• preact-cli-plugin-flow: Use Flow with the Preact CLI
• preact-cli-plugin-typescript: Adds TypeScript support to Preact CLI
• preact-cli-sw-precache: Adds support for custom sw-precache configuration.
• preact-cli-plugin-graphql: Adds support for GraphQL which can preprocess any "GraphQL query files" when imported.
• preact-cli-plugin-critical-css: Adds critical css to your pre-rendered routes.
• preact-cli-plugin-fast-async: Fork of plugin-async that uses NoDent
• preact-cli-plugin-atomizer: Use the Atomic CSS atomizer to generate stylesheets.
• preact-cli-workbox-plugin: Use workbox plugin instead of sw-precache for SW.
• preact-cli-svg-loader: Removes svg extension in file-loader, url-loader and raw-loader and use preact-svg-loader to load svg file as Preact components.