Opinionated boilerplate for Fractal with Webpack and plugins for building assets.
Please note that this isn't meant to be a production ready package but a starting point. Add and remove things according to your needs.
To prepare everything check out the project and run:
npm install
To start a local dev server that updates when either fractal content or assets (styles, scripts, images, etc) are changed:
npm run dev
To build files for deployment:
npm run build
The Fractal config in here sets up a build directory, some default statuses for components and docs, prepares for theme customization and adds in some handlebars helpers (based on this).
Webpack does a bunch of things:
Webpack has assets/scripts/main.js as the main entry point.
First eslint is run, extending the airbnb and prettier configs.
Then babel builds all the javascript using the @babel/preset-env config.
svg-sprite-loader loads any referenced svg files from assets/icons and outputs them to a single SVG sprite map with the prefix icon-. assets/scripts/icon-sprite-loader.js loads all icons as well as attaches the sprite map to the document. You can reference an icon in markup with:
<svg><use xlink:href="/images/icons.svg#icon-FILE_NAME"></use></svg>Styles are extracted using css-loader, postcss-loader and sass-loader. Postcss runs autoprefixer and postcss-object-fit-images. Styles are then extracted to a file by mini-css-extract-plugin.
Font files are extracted with file-loader.
Images are extraced with url-loader.
The dist and public directories are cleared by clean-webpack-plugin.
Stylelint checks styles based on stylelint-config-sass-guidelines and stylelint-config-prettier. It uses the stylelint-selector-bem-pattern to enforce BEM naming convention.
Files are copied from assets/_fractal and assets/images to the corresponding public assets folder and from assets/meta to the public root by copy-webpack-plugin.
When running webpack with the dev config fractal-webpack-plugin is used to run Fractal in dev mode alongside Webpack.
When using the prod config images are minified with imagemin-webpack-plugin while code is minified with uglifyjs-webpack-plugin and optimize-css-assets-webpack-plugin.
Prettier is used to automatically format code. It both has a NPM script npm run prettier, as well as a pre-commit hook.
Thanks for sticking around to the end. Please let me know if you have any suggestions.