Appsemble Webpack Configuration

An opinionated reusable Webpack configuration for block development

Table of Contents

• Installation
• Usage
  • TypeScript
  • Manual Adjustments
• License

Installation

npm install @appsemble/webpack-config

Usage

No setup is needed to use this configuration. @appsemble/cli will automatically fall back to this configuration if no webpack file has been specified in the .appsemblerc.yaml of the block and no webpack.config.js file exists.

This Webpack preset features:

• TypeScript
• CSS modules (*.module.css)
• Static files (*.gif, *.jpg, *.jpeg, *.png, *.svg, *.woff, *.woff2)
• Case sensitive files
• Optimizations for SVG and CSS

TypeScript

In order to add support for static assets and CSS modules, use the following tsconfig.json options:

{
  "compilerOptions": {
    "types": ["@appsemble/webpack-config/types"]
  }
}

Manual Adjustments

Since a Webpack configuration is a function that returns a Webpack configuration, this preset can be overridden by simply calling it from a file named webpack.config.js in the block root and modifying the result.

import createConfig from '@appsemble/webpack-config';
import ImageMinimizerPlugin from 'image-minimizer-webpack-plugin';

export default function webpackConfig(blockConfig, options) {
  const config = createConfig(blockConfig, options);

  // Add a plugin for example
  config.plugins.push(new ImageMinimizerPlugin());

  // Or configure a fallback
  config.resolve.alias.fallback.fs = false;

  return config;
}

License

LGPL-3.0-only © Appsemble