Liferay NPM Bundler Copy Loader

2.32.2 · active · verified Sun Apr 19

This package, `liferay-npm-bundler-loader-copy-loader`, serves as a specialized loader for `liferay-npm-bundler`, designed to facilitate the copying of files within a Liferay frontend project's build process. It allows developers to define rules in their `.npmbundlerrc` configuration to copy assets, such as images, fonts, or other static files, from a specified source to the output directory. The current stable version is 2.32.2. While specific release cadence for this individual loader is not explicitly stated, it is part of the larger Liferay frontend projects monorepo, which appears to have an active and ongoing release schedule across its various components. Its primary differentiator is its tight integration with the Liferay build tooling, providing a declarative way to manage asset copying specifically within that ecosystem.

Common errors

```
Error: Cannot find module 'liferay-npm-bundler-loader-copy-loader'
```
cause The package is not installed or incorrectly referenced in `package.json`.

fix Install the package as a development dependency: `npm install --save-dev liferay-npm-bundler-loader-copy-loader`.
```
Files matching 'test' regex are not copied to the output directory.
```
cause The `test` regular expression in `.npmbundlerrc` does not correctly match the intended files, or the `dest` property points to an incorrect or non-existent path.

fix Review the `test` pattern for syntax errors or incorrect matching criteria. Ensure the `dest` path is correctly specified and the target directory in the build output is checked for the copied files.

Warnings

gotcha Incorrect or overly broad `test` regex patterns can lead to unintended files being copied, or essential files being missed. Ensure your `test` patterns accurately match only the files you intend to process with the `copy-loader`.
Fix: Thoroughly test your `test` regex patterns with `regex101.com` or similar tools, and verify the build output to confirm only desired files are copied. Start with specific patterns and gradually broaden if necessary.
gotcha The `liferay-npm-bundler-loader-copy-loader` must be installed as a `devDependency` in your project's `package.json` for the `liferay-npm-bundler` to locate and use it during the build process.
Fix: Ensure installation using `npm install --save-dev liferay-npm-bundler-loader-copy-loader`.
gotcha Relative paths specified in the `dest` property are relative to the module's build output directory. Misunderstanding this context can lead to copied files appearing in unexpected locations or not being found by the Liferay portal.
Fix: Always verify the output structure after a build. The `dest` path dictates the subdirectory within the module's target folder. For example, `"dest": "images"` will place files into `/o/{module-name}/images/`.

Install

npm install liferay-npm-bundler-loader-copy-loader npm
yarn add liferay-npm-bundler-loader-copy-loader yarn
pnpm add liferay-npm-bundler-loader-copy-loader pnpm

Imports

copyLoader
```
import copyLoader from 'liferay-npm-bundler-loader-copy-loader';
```
While this package exports a loader function (likely as a default export), end-users typically interact with it by referencing its string name ('copy-loader') in the `.npmbundlerrc` configuration file, not by importing it directly into application code. This import pattern is primarily relevant for the `liferay-npm-bundler` itself or for programmatic usage within custom build scripts.
CopyLoaderFunction
```
const CopyLoaderFunction = require('liferay-npm-bundler-loader-copy-loader');
```
This is the CommonJS equivalent for importing the loader function in Node.js environments. As with ESM imports, direct programmatic use by end-users is uncommon; interaction is primarily via `.npmbundlerrc` configuration.
configureCopyLoader
wrong:
```
import configureCopyLoader from 'liferay-npm-bundler-loader-copy-loader';
```
correct:
```
import { configureCopyLoader } from 'liferay-npm-bundler-loader-copy-loader';
```
Hypothetical named export for advanced programmatic configuration or utility functions that might be exposed by the loader, though typical usage remains via `.npmbundlerrc`.

Quickstart

This configuration snippet for `.npmbundlerrc` demonstrates how to use `liferay-npm-bundler-loader-copy-loader` to copy different types of assets (images, fonts, documents, and specific files) from various source paths to designated `dest` directories within the Liferay module output.

// .npmbundlerrc
{
  "rules": [
    {
      "test": "^assets/images/.*\\.(png|jpe?g|gif|svg)$",
      "use": ["copy-loader"],
      "dest": "images"
    },
    {
      "test": "^assets/fonts/.*\\.(woff|woff2|eot|ttf|otf)$",
      "use": ["copy-loader"],
      "dest": "fonts"
    },
    {
      "test": "^assets/documents/.*\\.(pdf|doc|docx)$",
      "use": ["copy-loader"],
      "dest": "documents"
    },
    {
      "test": "^assets/misc/somefile.txt",
      "use": ["copy-loader"],
      "dest": "static"
    }
  ]
}

view raw JSON →