Webpack Copy After Build Plugin

1.0.1 · maintenance · verified Tue Apr 21

webpack-copy-after-build-plugin is a Webpack plugin specifically designed to facilitate the integration of Webpack-generated build artifacts into legacy Ruby on Rails applications that utilize Sprockets. Its primary function is to copy compiled Webpack bundles to a specified directory within the Rails asset pipeline after the Webpack build process completes, making them directly accessible via Sprockets directives (e.g., `//= require`). The current stable version is 1.0.1. Given its very specific niche for Rails/Sprockets integration, its release cadence is likely infrequent and focused on maintenance or specific feature needs related to that ecosystem, rather than rapid general Webpack evolution. This plugin differentiates itself by addressing a particular pain point for hybrid Rails/Webpack applications, significantly reducing friction when gradually introducing Webpack into existing Rails projects by ensuring Webpack output can be easily consumed by Sprockets.

Common errors

```
TypeError: WebpackCopyAfterBuildPlugin is not a constructor
```
cause The plugin was called as a function instead of being instantiated with the `new` keyword.

fix Ensure you are using `new WebpackCopyAfterBuildPlugin({...})` when adding it to your webpack `plugins` array.
```
Error: ENOENT: no such file or directory, copyFile '<webpack_output_path>/bundle.js' -> '<destination_path>/bundle.js'
```
cause The destination directory specified in the plugin's configuration does not exist.

fix Manually create the destination directory before running Webpack, or include a script step to create it (e.g., `mkdir -p path/to/destination`) in your build process.
```
Error: A plugin must be an instance of a class. Instead got: function WebpackCopyAfterBuildPlugin()
```
cause This error typically indicates that Webpack is trying to treat a non-class as a plugin, often due to incorrect CommonJS `require` usage when Webpack expects an ES module or a specific class structure.

fix Verify that `const WebpackCopyAfterBuildPlugin = require('webpack-copy-after-build-plugin');` is the correct way to import the plugin. Ensure your `webpack.config.js` environment (Node.js version, Babel transpilation) is compatible with the plugin's export format.

Warnings

gotcha The plugin expects the destination directories to exist. It does not automatically create them. Failure to create the target directory (e.g., `app/assets/javascripts/generated`) will result in copy errors.
Fix: Ensure all destination paths specified in the plugin configuration (`new WebpackCopyAfterBuildPlugin({ 'source': 'destination' })`) point to pre-existing directories. Use `mkdir -p` or similar commands as part of your build setup.
gotcha The `absoluteMappingPaths` option (defaulting to `false`) determines how destination paths are interpreted. If `false`, paths are relative to the Webpack output `path`. If `true`, they are treated as absolute paths. Misunderstanding this can lead to files being copied to incorrect locations or not found.
Fix: Carefully define your destination paths. If providing an absolute path in the mapping, explicitly set `absoluteMappingPaths: true` in the plugin options, or use `path.resolve` as shown in the quickstart for clarity.
breaking This plugin was designed for older Webpack versions (likely Webpack 2-4, given its `require` syntax and age). While it might function with Webpack 5+, full compatibility and optimal behavior are not guaranteed without thorough testing. Newer Webpack features or breaking changes in plugin APIs might cause unexpected issues.
Fix: If encountering issues with Webpack 5+, review the Webpack plugin API documentation for your version. Consider checking for community forks or alternative solutions if maintaining compatibility becomes problematic. Thorough testing is recommended for newer Webpack versions.

Install

npm install webpack-copy-after-build-plugin npm
yarn add webpack-copy-after-build-plugin yarn
pnpm add webpack-copy-after-build-plugin pnpm

Imports

WebpackCopyAfterBuildPlugin
wrong:
```
import WebpackCopyAfterBuildPlugin from 'webpack-copy-after-build-plugin';
```
correct:
```
const WebpackCopyAfterBuildPlugin = require('webpack-copy-after-build-plugin');
```
The plugin is primarily distributed as CommonJS, aligning with older Webpack configurations often found in legacy Rails projects.
WebpackCopyAfterBuildPlugin
```
import WebpackCopyAfterBuildPlugin from 'webpack-copy-after-build-plugin';
```
While primarily CJS, modern bundlers can often transpile/import CommonJS modules into ESM contexts. This import style assumes such a setup.

Quickstart

Demonstrates how to configure webpack-copy-after-build-plugin to copy a Webpack-generated bundle into a Rails asset pipeline directory, making it accessible via Sprockets directives.

const path = require('path');
const WebpackCopyAfterBuildPlugin = require('webpack-copy-after-build-plugin');

// Create a directory in your asset pipeline first, e.g., `mkdir -p app/assets/javascripts/generated`

module.exports = {
  context: __dirname,
  entry: {
    'webpack-application-bundle': './client/bundles/webpack-application.js'
  },
  output: {
    path: path.resolve(__dirname, 'public/assets'),
    filename: '[name]-[chunkhash].js'
  },
  // Other webpack configuration like modules, resolve, etc.
  plugins: [
    // Assuming another plugin for manifest generation, if needed
    // new WebpackSprocketsRailsManifestPlugin(),

    new WebpackCopyAfterBuildPlugin({
      // Maps output bundle name to its desired destination path within the Rails asset pipeline
      'webpack-application-bundle': path.resolve(__dirname, 'app/assets/javascripts/generated/webpack-application-bundle.js')
    })
  ]
};

// client/bundles/webpack-application.js (example content)
// alert("Howdy, I'm a Webpack Javascript file!");

// app/assets/javascripts/application.js (example Sprockets directive)
// //= require ./generated/webpack-application-bundle

view raw JSON →