@financial-times/dotcom-build-images 2.6.0

package/README.md

@@ -0,0 +1,61 @@
+# @financial-times/dotcom-build-images
+
+This package exports a Webpack plugin to provide support for static image assets in our asset pipeline.
+The plugin will copy all image files contained in the `client/` directory, and any of its subdirectories, into the configured public directory. 
+
+## Getting started
+
+This package is compatible with Node 12+ and is distributed on npm.
+
+```sh
+npm install --save-dev @financial-times/dotcom-build-images
+```
+
+After installing the module you must add it to the list of plugins in your project's `webpack.config.js` configuration file:
+
+```js
+const { PageKitImagesPlugin } = require('@financial-times/dotcom-build-base');
+
+module.exports = {
+	plugins: [
+		new PageKitImagesPlugin()
+	]
+}
+```
+## Scope
+
+The directory path for each image will be retained e.g.
+
+`image.jpg` -> `image.jpg`
+`images/image.jpg` -> `images/image.jpg`
+`images/subdir/image.jpg` -> `images/subdir/image.jpg`
+
+The public image paths are automatically added to the generated `manifest.json`, meaning that they're available via the `dotcom-server-asset-loader` e.g.
+
+```
+assetLoader.getPublicURL('images/subdir/image.jpg')
+```
+
+The image file names are hashed in production, e.g. `image.76f59deb1275.jpg`, to allow us to set longer cache times.
+
+The plugin can be configured to look in a custom location for the images by passing in the relevant base path:
+
+```js
+new PageKitImagesPlugin({ basePath: path.join(__dirname, '/path', '/to', '/images') })
+```
+
+## Options
+
+| Option     | Type    | Default       | Description                     |
+|------------|---------|---------------|---------------------------------|
+| `basePath` | String  | `"./client/"` | Directory to look in for images |
+
+## Caveats
+
+- This works by creating a new "fake" entry point and will output a useless
+  JS file - this was necessary because the manifest plugin used by Page Kit
+  doesn't recognise the type of dependencies added by Webpack's copy plugin
+  (so you wouldn't be able to access images via the asset loader, boo!)
+
+- It is possible to use the copy plugin, but that would mean swapping the
+  manifest plugin: https://gist.github.com/i-like-robots/9a460b55bcc34a38866b9cc163787639

package/dist/node/index.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageKitImagesPlugin = void 0;
+const path = require('path');
+const glob = require('glob');
+const MultiEntryPlugin = require('webpack/lib/MultiEntryPlugin');
+class PageKitImagesPlugin {
+    constructor(options = {}) {
+        this.options = {
+            basePath: './client',
+            ...options
+        };
+    }
+    apply(compiler) {
+        const imageFiles = glob.sync('**/*.{png,jpg,jpeg,gif,webp,ico,svg}', {
+            absolute: true,
+            cwd: path.resolve(this.options.basePath)
+        });
+        new MultiEntryPlugin(compiler.context, imageFiles, '__images__').apply(compiler);
+        const isDevMode = compiler.options.mode === 'development';
+        const outputFileName = isDevMode ? '[name].[ext]' : '[name].[contenthash:12].[ext]';
+        compiler.options.module.rules.push({
+            test: /\.(png|jpe?g|gif|webp|ico|svg)$/,
+            use: [
+                {
+                    loader: require.resolve('file-loader'),
+                    options: {
+                        name: (resourcePath) => {
+                            const dirname = path.dirname(resourcePath);
+                            const relativePath = path.relative(this.options.basePath, dirname);
+                            // retain relative directory structure
+                            return path.join(relativePath, outputFileName);
+                        }
+                    }
+                }
+            ]
+        });
+    }
+}
+exports.PageKitImagesPlugin = PageKitImagesPlugin;

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@financial-times/dotcom-build-images",
+  "version": "2.6.0",
+  "description": "",
+  "main": "dist/node/index.js",
+  "types": "src/index.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "tsc": "../../node_modules/.bin/tsc --incremental",
+    "clean": "npm run clean:dist && npm run clean:node_modules",
+    "clean:dist": "rm -rf dist",
+    "clean:node_modules": "rm -rf node_modules",
+    "build": "npm run build:node",
+    "build:node": "npm run tsc -- --module commonjs --outDir ./dist/node",
+    "dev": "npm run build:node -- --watch"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "webpack": "^4.39.2"
+  },
+  "dependencies": {
+    "file-loader": "^6.0.0",
+    "glob": "^7.1.6"
+  },
+  "devDependencies": {
+    "@types/webpack": "^4.41.7"
+  },
+  "engines": {
+    "node": ">= 12.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "repository": "https://github.com/Financial-Times/dotcom-page-kit.git",
+    "directory": "packages/dotcom-build-images"
+  },
+  "homepage": "https://github.com/Financial-Times/dotcom-page-kit/tree/HEAD/packages/dotcom-build-images"
+}

package/src/index.ts

@@ -0,0 +1,44 @@
+const path = require('path')
+const glob = require('glob')
+const MultiEntryPlugin = require('webpack/lib/MultiEntryPlugin')
+
+export class PageKitImagesPlugin {
+  options: { basePath: string }
+
+  constructor(options = {}) {
+    this.options = {
+      basePath: './client',
+      ...options
+    }
+  }
+
+  apply(compiler) {
+    const imageFiles = glob.sync('**/*.{png,jpg,jpeg,gif,webp,ico,svg}', {
+      absolute: true,
+      cwd: path.resolve(this.options.basePath)
+    })
+
+    new MultiEntryPlugin(compiler.context, imageFiles, '__images__').apply(compiler)
+
+    const isDevMode = compiler.options.mode === 'development'
+    const outputFileName = isDevMode ? '[name].[ext]' : '[name].[contenthash:12].[ext]'
+
+    compiler.options.module.rules.push({
+      test: /\.(png|jpe?g|gif|webp|ico|svg)$/,
+      use: [
+        {
+          loader: require.resolve('file-loader'),
+          options: {
+            name: (resourcePath) => {
+              const dirname = path.dirname(resourcePath)
+              const relativePath = path.relative(this.options.basePath, dirname)
+
+              // retain relative directory structure
+              return path.join(relativePath, outputFileName)
+            }
+          }
+        }
+      ]
+    })
+  }
+}