Appsemble Webpack Configuration
An opinionated reusable Webpack configuration for block development
Table of Contents
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;
}