Adobe Experience Manager Webpack Plugin

webpack-aemsync lets you synchronize your webpack build directly with Adobe Experience Manager.

webpack-aemsync uses the same configuration files generated by aem-clientlib-generator.

Usage

Add webpack-aemsync to your project:

npm install webpack-aemsync

Add webpack-aemsycn to your webpack configuration:

// webpack.config.js
const WebpackAemSync = require('webpack-aemsync');
const clientLibConfig = require('/path/to/clientlib.config.js');

module.exports = {
  plugins: [
    new WebpackAemSync(clientLibConfig),
    // ...additional plugins
  ],
  // ...additional configuration
};

Add your client library to your configuration file:

module.exports = {
  // default working directory (can be changed per 'cwd' in every asset option)
  context: __dirname,

  // path to the clientlib root folder (output)
  clientLibRoot: "path/to/clientlib-root",

  // define all clientlib options here as array... (multiple clientlibs)
  libs: [
    {
      name: "test.base.apps.mainapp",

      // optional override path to write clientlib files to, by default files
      // are written to lib.name/
      outputPath: "explicit/path/to/lib/or/existing/lib/structure",

      assets: {
        js: [
          "src/frontend/js/app.js"
        ],
        css: [
          "src/frontend/css/styling.css"
        ]
      }
    },
    ...// next clientlibs
  ],

  // or as object (single clientlib)
  libs: {
    name: "test.base.apps.mainapp",
    assets: {
      js: [
        "src/frontend/js/app.js"
      ],
      css: [
        "src/frontend/css/styling.css"
      ]
    }
  }
}

clientlib.config.js

context

The current working directory.

cwd

An alias for context.