Razzle Configuration Function
Table of Contents generated with DocToc
Read more about razzle. Check out the example to utilize this configuration.
Features
- Typescript (with JS polyfill support via the TSLoaderOverride flag)
- Offline
- Progressive Web App
- File compression optimizations (Brotli, GZIP)
- Stylelint
- SCSS support
Usage
// razzle.config.jsconst modifyBuilder = modifyBuilderconst webpack = const StyleLintPlugin = const path = const appRoot = '.'const srcRoot = path const customConfigs = appRoot srcRoot modernizrConfig: /\.modernizrrc$/ workboxConfig: globDirectory: 'build' globPatterns: '**/*.{js,css,svg,html}' globIgnores: '**\/sw.js' swDest: 'build/public/sw.js' clientsClaim: true skipWaiting: true pwaConfig: name: 'React App' short_name: 'app' orientation: 'portrait' display: 'fullscreen' description: 'react on razzle' start_url: '.' theme_color: '#ffffff' background_color: '#ffffff' related_applications: // These go in public. At least 512 if you want to pass Lighthouse testng. icons: // { // "src": "favicon.ico", // "sizes": "192x192", // "type": "image/png" // }, // { // "src": "android-chrome-192x192.png", // "sizes": "192x192", // "type": "image/png" // }, // { // "src": "android-chrome-512x512.png", // "sizes": "512x512", // "type": "image/png" // }, // { // "src": "favicon-144x144.png", // "sizes": "144x144", // "type": "image/png" // } overrideoverrideTSLoader: false // This is the default, turn this on for both Babel + TS support. vendorPaths: require require require require // ... add any other vendor packages with require.resolve('xxx') extensions: aliasPaths: '@assets': path '@components': path '@containers': path '@screens': path '@services': path '@src': path loaders: test: /\.?$/ use: 'base64-font-loader' plugins: server: banner: 'require("source-map-support").install();' raw: true entryOnly: false client: context: appRoot files: 'src/assets/css/**/*.css' universal: moduleexports = modify:
Contributors
Thanks goes to these wonderful people (emoji key):
Denis Rhoden 💬 💻 🎨 📖 💡 🤔 👀 ⚠️ 🔧 |
---|
This project follows the all-contributors specification. Contributions of any kind welcome!