Agency Webpack Mix Config

Overview

The Agency Webpack Mix Config is a configuration tool that provides developers with a simple and efficient way to manage project assets for websites and web apps. It offers a top-class developer experience and a straightforward filing system. The config aims to simplify the complexity of raw Webpack configs and make build adjustments quick and painless. It also supports the use of next generation JavaScript and CSS with automatic polyfills for targeted browsers. The config includes a development proxy with script and style injection, a static site generator, minimal config files, and various build actions for style, script, images, icons, and static files.

Features

• Sensible configuration complexity: Laravel Mix provides a simple layer upon Webpack, making it easier to understand and make build adjustments.
• Modern mainstream defaults: Supports next generation JavaScript and CSS with auto-applied polyfills for chosen browsers.
• Development proxy with script and style injection: Comes with a pre-configured webpack development server that shows instant browser updates upon code changes.
• Generate additional style and script outputs: Simply add them to a folder in the src directory to create additional outputs.
• Static site generator: Converts Twig to HTML, allowing for quick build setup. Also supports CMS-based sites with a few config updates.
• Minimal config files: All config is defined in the webpack.mix.js file, reducing the need for excessive build configuration files.
• Build actions: Provides various build actions for style, script, images, icons, and static files.

Installation

To get started with the Agency Webpack Mix Config, follow these steps:

1. Copy the repository into a new project folder:

$ git clone [repository-url]

or use Github’s new tool to create a new repository and then clone the project.

2. Install the dependencies:

$ npm install

3. Update the proxy domain and start adding project files. The config allows for either a static or dynamic template site.

a) Create a static site:

• Convert the Twig templates in src/templates into static HTML files and hash assets during a production build.
• Update the devProxyDomain in webpack.mix.js.
• Add your devProxyDomain to Valet/Homestead/Vagrant.
• If using Valet, add it like this:

$ valet link [your-dev-proxy-domain]

• To preview your static site, run:

$ npm run build

• To start your development server, run:

$ npm run dev

b) Create a dynamic site:

• This option allows you to use a CMS (such as Craft, Wordpress, or Laravel).
• During production, it compresses and hashes assets.

Summary

The Agency Webpack Mix Config is a powerful and efficient tool for managing project assets in web development. It simplifies the complexity of Webpack configs and provides a seamless developer experience. With its support for modern JavaScript and CSS, development proxy with live updates, static site generation, and minimal config files, it offers a solid platform for building websites and web apps. Whether you’re creating a static or dynamic site, this config provides the necessary tools and actions to optimize your build process.