emit-file-webpack-plugin

2.0.1 verified Sat Apr 25 auth: no javascript

Webpack plugin to emit arbitrary files into the compilation output. Current stable version is 2.0.1, released in 2023. Low release cadence. Differentiator: handles async content, hash injection, and custom output paths without extra dependencies like copy-webpack-plugin. Ships TypeScript declarations. Requires webpack and webpack-sources as peer dependencies.

Common errors

error TypeError: Class extends value undefined is not a constructor or null ↓

cause Missing or incompatible webpack and webpack-sources peer dependencies.

fix

Install peer dependencies: npm install --save-dev webpack webpack-sources

error Error: Couldn't find plugin with the id "EmitFilePlugin" ↓

cause Incorrect import of the plugin (named import instead of default).

fix

Use default import: import EmitFilePlugin from 'emit-file-webpack-plugin' or const EmitFilePlugin = require('emit-file-webpack-plugin').

error TypeError: compilation.hooks.processAssets is not a function ↓

cause Using the plugin with webpack 4 or older, where processAssets hook does not exist.

fix

Upgrade to webpack 5 or use an older version of the plugin that supports webpack 4.

Warnings

breaking In v2.0.0, the plugin now respects overridden .toString() on content objects. Previously, non-string/non-buffer content would always be JSON.stringify'd. If your content object overrides toString but you relied on JSON.stringify behavior, this change may break your output. ↓

fix If you need JSON.stringify, use JSON.stringify(content) explicitly in the content option.

gotcha The 'path' option can be relative to webpack's output path or absolute. If you specify a relative path, it's resolved from webpack's output.path, not from the project root. ↓

fix Always use absolute paths with path.resolve() to avoid confusion.

deprecated Webpack 5 removed the require('webpack-sources'); you must install webpack-sources as a separate peer dependency. The plugin does not bundle it. ↓

fix Install webpack-sources: npm install --save-dev webpack-sources

gotcha If you use the 'hash' option, and you don't include '[hash]' in the filename, the hash will be appended as a query string (e.g., index.js?hash). This may not work for all asset types (e.g., images in CSS). ↓

fix Explicitly add '[hash]' in the filename to control placement, e.g., 'index.[hash].js'.

Install

npm install emit-file-webpack-plugin

yarn add emit-file-webpack-plugin

pnpm add emit-file-webpack-plugin

Imports

EmitFilePlugin

wrong

const EmitFilePlugin = require('emit-file-webpack-plugin').default

correct

import EmitFilePlugin from 'emit-file-webpack-plugin'

Default export; in CommonJS you can use require() directly without .default.

EmitFilePlugin

wrong

const EmitFilePlugin = require('emit-file-webpack-plugin').EmitFilePlugin

correct

const { EmitFilePlugin } = require('emit-file-webpack-plugin')

Named export is not available in CJS; only default export exists.

EmitFilePlugin

wrong

import { EmitFilePlugin } from 'emit-file-webpack-plugin'

correct

import EmitFilePlugin from 'emit-file-webpack-plugin'

Named import is incorrect; the package provides a default export only.

Quickstart

Shows basic usage using CommonJS require with a JSON output file.

const EmitFilePlugin = require('emit-file-webpack-plugin');

module.exports = {
  // ... other webpack config
  plugins: [
    new EmitFilePlugin({
      filename: 'version.json',
      content: JSON.stringify({ version: process.env.npm_package_version || '0.0.0' })
    })
  ]
};