👨💻 A capable website/webapp boilerplate ready for the web agency battlefield. Creates a static site with Twig templating by default. Supports Craft/Wordpress/Laravel after a few adjustments.
Featuring a top-class developer experience and simple filing system for your project assets, this config provides a solid platform for your next website (or web app).
Because of the complexity of raw Webpack configs, they can take an extended time to understand. Laravel Mix provides a simple layer upon Webpack to help make many build adjustments quick and painless.
Use next generation JavaScript and CSS with polyfills automatically applied to the browsers you choose to support.
A pre-configured webpack development server rewards your code changes with snappy browser updates.
Generate additional style and script outputs just by adding them to a folder in the src
directory.
Get straight to the build with a static site generator that converts twig to html. There's also full support for CMS based sites by updating a few config values.
Avoid excessive build configuration files with all config defined in webpack.mix.js
.
The package.json
contains browser targets and linting configs.
src/styles
Style files are compiled to CSS and PostCss plugins provide additional transformations and optimisations.
src/scripts
Script files are transpiled to vanilla JavaScript and the necessary polyfills included.
src/images
Images are optimized and copied to the build directory.
src/icons
Individual SVG icons are optimised then combined into a single cacheable SVG.
<svg><use xlink:href="icon-code" /></svg>
src/static
Additional folders with no transform requirements are copied to your build folders.
npx degit ben-rogerson/agency-webpack-mix-config new-project
…or use Github's new tool to create a new repository then clone the project down.
cd new-project && npm install
This config allows for either static or dynamic template sites. Dynamic template sites could be ones running Craft, Wordpress, or Laravel.
This option converts the Twig templates in src/templates
into static Html files and hashes assets during a production build.
Update the devProxyDomain
in webpack.mix.js
, eg:
const config = {
// ...
devProxyDomain: "http://my-static-site.test",
}
Then add your devProxyDomain
to Valet/Homestead/Vagrant.
If you're using Valet you can add it like this:
cd web && valet link my-static-site.test
You'll need to run npm run build
to preview your static site operating at my-static-site.test
.
npm run dev
to start your development server.
This option lets you use a CMS and during production it compresses and hashes assets and creates a manifest file.
You could add any CMS but in this example I'll copy in the files from the Craft CMS starter:
npx degit --force craftcms/craft
Craft CMS requires a templates
directory in the base folder for their twig templates so I'll add these config values in webpack.mix.js
:
const config = {
// Dev domain to proxy
devProxyDomain: "http://my-craft-site.test",
// Paths to observe for changes
devWatchPaths: ["templates"],
// Folders where purgeCss can look for used selectors
purgeCssGrabFolders: ["src", "templates"],
// Build a static site from the src/template files
buildStaticSite: false,
}
Then create a new project database, add the devProxyDomain
to Valet/Homestead/Vagrant and finish the Craft install with composer install && ./craft setup
.
No matter what CMS you use, you'll need a way to reference the files from the mix-manifest.json
file that's created.
This example shows how to use Twigpack to load the files from the manifest.
There will be some unnecessary packages used only for rendering a static site. Remove them from your project:
npm rm html-webpack-plugin twig-html-loader laravel-mix-twig-to-html
The following tasks are available:
npm run dev
# Run the development server
npm run start
# Run the development build
npm run build
# Run the production build
npm run fix-scripts
# Fix your javascript with eslint