Skip to content
🔧 A capable website/webapp config built for the modern web agency.
Branch: master
Clone or download
Ben Rogerson
Latest commit 1725c6b Jul 17, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src backpedal on the static twig criticalcss idea Jul 5, 2019
web add favicon to avoid error Jun 29, 2019
.gitignore init Jun 10, 2019
README.md add note about loading all the js Jul 17, 2019
icon.png add initial images Jun 23, 2019
package-lock.json
package.json add https dev server by default Jul 17, 2019
webpack.mix.js no need for mix reference Jul 17, 2019

README.md

Agency Webpack Mix Config

Icon

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).

Features

Sensible configuration complexity

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.

Modern mainstream defaults

Use next generation JavaScript and CSS with polyfills automatically applied to the browsers you choose to support.

Development proxy with script and style injection

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.

Static site generator

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.

Minimal config files

Avoid excessive build configuration files with all config defined in webpack.mix.js.
The package.json contains browser targets and linting configs.

Build actions

src/styles

Style files are compiled to CSS and PostCss plugins provide additional transformations and optimisations.

Styles src folder


src/scripts

Script files are transpiled to vanilla JavaScript and the necessary polyfills included.

Script src folder

  • Script transpiling with Babel with minifying and sourcemaps
  • Automatic browser polyfills are provided by Core-Js 3
  • ESLint is provided for error linting

src/images

Images are optimized and copied to the build directory.

Image src folder

  • Optimisations are provided by Imagemin

src/icons

Individual SVG icons are optimised then combined into a single cacheable SVG.

Icons src folder

  • An async script adds the svg sprite to your page
  • You can display an icon with svg use:
<svg><use xlink:href="icon-code" /></svg>

src/static

Additional folders with no transform requirements are copied to your build folders.

Static src folder


Getting started

1. Copy this repo into a new project folder:

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.

2. Install the dependencies:

cd new-project && npm install

3. Update the proxy domain and start adding project files

This config allows for either static or dynamic template sites. Dynamic template sites could be ones running Craft, Wordpress, or Laravel.

a) Start a static site

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 the devProxyDomain to Valet/Homestead/Vagrant and run npm run dev to start your development server.

b) Start a dynamic site

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.

For HMR and livereloading files in your 'templates' folder, you'll need to load these JavaScript files:

<script src="https://localhost:8080/dist/manifest.js"></script>
<script src="https://localhost:8080/dist/vendor.js"></script>
<script src="https://localhost:8080/dist/main.js"></script>

Then run npm run dev to start your development server.

Tasks

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
# Fixes your javascript with eslint
You can’t perform that action at this time.