Skip to content

Opinionated boilerplate for Fractal with Webpack and plugins for building assets.

Notifications You must be signed in to change notification settings

rchavik/fractal-webpack-boilerplate

 
 

Repository files navigation

Fractal Webpack Boilerplate

Originally from: https://github.com/carlpihl1/fractal-webpack-boilerplate

Modified to strip things not needed at this time and use mono-fractal and parts of fratomic

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

What's in here

Fractal

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

Webpack does a bunch of things:

Webpack has assets/scripts/main.js as the main entry point.

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.

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.

About

Opinionated boilerplate for Fractal with Webpack and plugins for building assets.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 60.0%
  • HTML 38.4%
  • CSS 1.6%