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.
Style files are compiled to CSS and PostCss plugins provide additional transformations and optimisations.
- Sass auto compiling, prefixing, minifying and sourcemaps
- CriticalCSS and PurgeCSS come preconfigured to improve your page speed
- Autoprefixer and PostCSS Preset Env provide support for older browsers
Script files are transpiled to vanilla JavaScript and the necessary polyfills included.
- Script transpiling with Babel with minifying and sourcemaps
- Automatic browser polyfills are provided by Core-Js 3
- ESLint is provided for error linting
Images are optimized and copied to the build directory.
- Optimisations are provided by Imagemin
Individual SVG icons are optimised then combined into a single cacheable SVG.
- An async script adds the svg sprite to your page
- You can display an icon like this:
<svg><use xlink:href="icon-code" /></svg>
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
inwebpack.mix.js
, eg:const config = { // ... devProxyDomain: "https://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 atmy-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: "https://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