sc.recipe.staticresources 1.1b3

Configuration options

The default template

In the default template we selected what webpack tools are valid to our needs, what is basically theme and addons development. This is the list of what we include:

HTML Loader

Used to process the HTML file; in our use case it’s used when we create a new theme.

Image Webpack Loader

Process all images referenced to save space in the final images, it tile the workflow with some specialized tools for each image format.

SVG URL Loader

Process all SVG files and creates a data-url string. For example it inserts the SVG file into the final CSS file to save requests.

Webpack SpriteSmith

Brings an easy way to create image sprites, you simply add the icon images in one folder and it creates all you need to use the sprite with your choosen CSS pre-processor.

Babel

A transpiler that makes possible to use the next generation of JavaScript today.

Sass

The most mature, stable, and powerful professional grade CSS extension language in the world.

PostCSS

A post-processor used to transform styles with JavaScript plugins. In our configuration we use just CSS next plugin to add automatically all vendor prefixes for the last 3 versions of major browsers, as soon as the browsers support more features, your final CSS will automatically cost less bytes.

JavaScript Helper

There’s a little helper created to simplify the configuration burden of add-ons that use this recipe. Let’s see how to use it:

1. Create a package.json file with the following:

{
  "name": "my.package",
  "version": "0.0.1",
  "main": "app/mypackage.js",
  "scripts": {
    "build": "./node_modules/.bin/webpack -p",
    "debug": "NODE_ENV=debug ./node_modules/.bin/webpack --watch",
    "watch": "./node_modules/.bin/webpack -p --watch",
    "test": "NODE_ENV=testing ./node_modules/.bin/karma start --single-run"
  },
  "repository": {},
  "license": "GPL-2.0",
  "dependencies": {
    "sc-recipe-staticresources": "simplesconsultoria/sc.recipe.staticresources#1.1b3"
  }
}

This way it’s possible to add all dependencies of the configuration with just one line, keeping versions well tested across all ecosystems just like Buildout’s versions do.

2. Create a webpack.config.js file with the following:

const makeConfig = require('sc-recipe-staticresources');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = makeConfig(
  // name
  'my.package',

  // shortName
  'mypackage',

  // path
  `${__dirname}/dist`,

  //publicPath
  `${__dirname}/../src/my/package/browser/static`,

  //callback
  function(config, options) {
    config.entry.unshift(
      './app/img/img1.png',
      './app/img/img2.png',
      './app/img/img3.png',
    );
    config.plugins.push(
      new CopyWebpackPlugin([{
        from: 'app/folder/*',
        to: 'folder',
        flatten: true
      }]),
    );

  },
);

This way it’s possible to inherit a configuration of all dependencies in the current version.

Our mrbob template generates this configuration when the recipe is run for the first time. You can modify it to fit your needs, but for most themes and add-ons these defaults are a good starting point (something similar to Buildout’s extend configuration).

Usage

In our simplest example, the following scripts are created:

$ bin/env-mypackage

This command sets the buildout node installation in the system PATH, this way you can use webpack as described in their docs.

$ bin/watch-mypackage

This command makes webpack wait for any change in any SASS, JS (ES6) files and generates the minified version of CSS and JS (ES5) UMD module for your application.

$ bin/debug-mypackage

This does the same as watch command, but don’t try to minify the final CSS and JS. Used for debug purposes.

$ bin/build-mypackage

This command builds the CSS and JS minified, but doesn’t wait for any change.

$ bin/test-mypackage

This command runs the JavaScript tests using karma, mocha, chai and sinon.

Note that short_name is added at the end of the script name. This way you can have multiple webpack folders in the same package (if you have multiple themes inside the same package, for example).

1.1b3 (2018-10-03)

• Fix node package version

1.1b2 (2018-10-03)

• Use a callback to fine tune the configuration at javascript helper. [rodfersou]

• Review to add Sprite plugin just if necessary. [rodfersou]

• Review to add SCSS files just if necessary. [rodfersou]

• Use script async by default. [rodfersou]

• Fix library definition to work with Plone 5. [thet, rodfersou]

• Emit current package version in package.json configuration (closes #40). [rodfersou]

1.1b1 (2018-09-28)

• Create a module to reuse configuration. [rodfersou]

1.0b1 (2018-08-24)

• Change template to use a package Known-Good-Set (KGS). [rodfersou]

• Update package versions. [rodfersou]

1.0a2 (2018-01-24)

• Review how HTML and CSS are processed (closes #23). [rodfersou]

• Remove old scripts generated by this recipe after buildout run (closes #21). [rodfersou]

• Rename script to debug instead of dev to avoid misunderstanding (closes #22). [rodfersou]

• Fix webpack installation conflict (closes #25). [rodfersou]

• Fix package license typo on template. [hvelarde]

• Run build command after update recipe (closes #18). [rodfersou]

• Add an error log if directory parameter is invalid. [rodfersou]

1.0a1 (2017-11-21)

• Initial release.