{"id":15497,"library":"webpack-copy-after-build-plugin","title":"Webpack Copy After Build Plugin","description":"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.","status":"maintenance","version":"1.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/rupurt/webpack-copy-after-build-plugin","tags":["javascript","webpack","copy"],"install":[{"cmd":"npm install webpack-copy-after-build-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-copy-after-build-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-copy-after-build-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency as it's a webpack plugin.","package":"webpack","optional":false},{"reason":"Commonly used in conjunction for Rails integration, as shown in the example configuration.","package":"webpack-sprockets-rails-manifest-plugin","optional":true}],"imports":[{"note":"The plugin is primarily distributed as CommonJS, aligning with older Webpack configurations often found in legacy Rails projects.","wrong":"import WebpackCopyAfterBuildPlugin from 'webpack-copy-after-build-plugin';","symbol":"WebpackCopyAfterBuildPlugin","correct":"const WebpackCopyAfterBuildPlugin = require('webpack-copy-after-build-plugin');"},{"note":"While primarily CJS, modern bundlers can often transpile/import CommonJS modules into ESM contexts. This import style assumes such a setup.","symbol":"WebpackCopyAfterBuildPlugin","correct":"import WebpackCopyAfterBuildPlugin from 'webpack-copy-after-build-plugin';"}],"quickstart":{"code":"const path = require('path');\nconst WebpackCopyAfterBuildPlugin = require('webpack-copy-after-build-plugin');\n\n// Create a directory in your asset pipeline first, e.g., `mkdir -p app/assets/javascripts/generated`\n\nmodule.exports = {\n  context: __dirname,\n  entry: {\n    'webpack-application-bundle': './client/bundles/webpack-application.js'\n  },\n  output: {\n    path: path.resolve(__dirname, 'public/assets'),\n    filename: '[name]-[chunkhash].js'\n  },\n  // Other webpack configuration like modules, resolve, etc.\n  plugins: [\n    // Assuming another plugin for manifest generation, if needed\n    // new WebpackSprocketsRailsManifestPlugin(),\n\n    new WebpackCopyAfterBuildPlugin({\n      // Maps output bundle name to its desired destination path within the Rails asset pipeline\n      'webpack-application-bundle': path.resolve(__dirname, 'app/assets/javascripts/generated/webpack-application-bundle.js')\n    })\n  ]\n};\n\n// client/bundles/webpack-application.js (example content)\n// alert(\"Howdy, I'm a Webpack Javascript file!\");\n\n// app/assets/javascripts/application.js (example Sprockets directive)\n// //= require ./generated/webpack-application-bundle","lang":"javascript","description":"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."},"warnings":[{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"breaking","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure you are using `new WebpackCopyAfterBuildPlugin({...})` when adding it to your webpack `plugins` array.","cause":"The plugin was called as a function instead of being instantiated with the `new` keyword.","error":"TypeError: WebpackCopyAfterBuildPlugin is not a constructor"},{"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.","cause":"The destination directory specified in the plugin's configuration does not exist.","error":"Error: ENOENT: no such file or directory, copyFile '<webpack_output_path>/bundle.js' -> '<destination_path>/bundle.js'"},{"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.","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.","error":"Error: A plugin must be an instance of a class. Instead got: function WebpackCopyAfterBuildPlugin()"}],"ecosystem":"npm"}