october-plugin webpackassets-plugin

castiron/webpackassets-plugin

Webpack hashed files in October CMS

Webpack Assets in October CMS

This plugin for OctoberCMS works in tandem with the node package webpack-assets-manifest (https://github.com/webdeveric/webpack-assets-manifest) to include CSS, JS, and font assets in your site based on a JSON manifest file written to your assets directory. This will allow you to use hashed file names in your built files, and let October pick up the paths effortlessly., _(*1)

In non-development environments (when the APP_ENV environment variable doesn't equal "dev") these paths get cached so the JSON file isn't read on every request. This cache should be cleared as a part of the deploy process by running php artisan cache:clear., _(*2)

Installation

composer require castiron/webpackassets-plugin

Quick start

This plugin provides a component called webpackAssets. Include the component in your view and then use the following to include the js/css/fonts (WOFF2 only) in your template (e.g. in a partial, layout, etc.):, _(*3)

[webpackAssets]
==


{{ webpackAssets.tag('unhashed_filename.woff2') | raw }}


{{ webpackAssets.tag('unhashed_filename.css') | raw }}

[webpackAssets]
==


{{ webpackAssets.tag('unhashed_filename.js') | raw }}
{{ webpackAssets.tag('webpack-dev-server.js') | raw }}

Keep in mind that there’s a performance trade-off to preloading too many font assets, so limit your use to only the highest-priority font assets. For the same reason, the plugin will only create tags for the WOFF2 font format. (See “The Critical Request” and “The Web Fonts: Preloaded” for more information.), _(*4)

Component options

publicFolder (default: "www"), _(*5)

If you are using a public folder in OctoberCMS (you should be!), specify it here. E.g. "www" or "public", _(*6)

[webpackAssets]
publicFolder = public

assetsFolder (default: "assets"), _(*7)

The path to the folder, relative to your public folder, to which webpack is writing your assets. This corresponds to output.path from your webpack config., _(*8)

[webpackAssets]
assetsFolder = assets

manifestFilename (default: "manifest.json", must be relative to assetsFolder), _(*9)

[webpackAssets]
manifestFilename = files.json

Changelog

2.0.3

• October 1.1 compatible