mizziness / craft3-webpack5-tailwind2-boilerplate

A real-world boilerplate for Craft CMS 3 projects that leverages Wepback 5, Tailwind 2, PostCSS 8, and has a hot-reload dev environment. Now with dynamic imports, asynchronous chunk loading, and legacy vs modern browser support!
MIT License
45 stars 11 forks source link
babel boilerplate core-js hmr postcss tailwindcss webpack webpack-dev-server

Craft CMS 3 Boilerplate

(with Webpack 5, Tailwind 2, PostCSS 8, and HMR, and other goodies)

A real-world boilerplate for Craft CMS 3 projects that leverages Wepback 5, Tailwind 2, PostCSS 8, and Twigpack. Also included is a hot-reload dev environment. I created this as a starting point for Craft CMS 3 / Webpack 5 projects.

What's New

This version of the project has a few significant changes, including updates to the framework and dependencies, better bundle performance in production, better asset chunking and support, and a starting point for your template structure.

What's Included

Other included tools/plugins

Webpack

Transpiling

Loaders, Sass, Plugins

Get Started

First, finish up installing Craft CMS locally for your development environment. The setup wizard will take you through providing your database credentials, and will also generate a new security key and App ID.

$ composer install
$ ./craft setup/index

Then install our other packages and run the HMR development server:

$ yarn install
$ yarn dev

(I use yarn for my project, but you don't need to - use the tool of your choice.)

Webpack assets are set up to serve from https://localhost:8080 by default.

Note: The URL "https://localhost:8080" won't show anything by default, but if you prefer to have a page load, you can edit wpconfig/webpack.dev.js and uncomment the new HtmlWebpackPlugin code block. This will generate an index.html file along with your assets.

You can include your chunked/hashed assets in Craft CMS templates by using Twigpack's features:

{{ craft.twigpack.includeCssModule("app.css", true) }}
{{ craft.twigpack.includeJsModule("app.js", true, {"type": "module"}) }}
{{ craft.twigpack.includeJsModule("chunk-vendors.js", true) }}

If you open up the included templates/index.twig file, you'll see that it has been edited to support Twigpack and our bundles.

Scripts

As you can see in the package.json file, there are 3 included scripts for convenience:

clean": "./craft clear-caches/all && ./craft cache/flush-all", "clean:dist": "rm -rf ./web/dist/*", "clean:all": "yarn run clean:dist && yarn run clean", "dev": "yarn run clean:dist && cross-env NODE_ENV=development --max_old_space_size=8096 webpack serve --mode development --config ./wpconfig/webpack.dev.js", "build": "yarn run clean:dist && cross-env NODE_ENV=production webpack --mode production --config ./wpconfig/webpack.prod.js", "stats":

Make it Yours

This project comes pre-configured out of the box to work with Craft CMS templates, but there are plenty of ways you can customize the way this works to suit your own needs. It tries to make few assumptions about your toolkit, other than the minimum required configuration to work with the tools included.

Prettier Webpack

If you're like me and you prefer a cleaner webpack report, try this:

yarn add webpackbar -D

In the wpconfig files, you'll see two commented-out lines which you can uncomment to enable a much nicer view of your webpack report with webpackbar.

Inspired By

And used as a starting point: https://github.com/taniarascia/webpack-boilerplate

License

This project is open source and available under the MIT License.