Registry / devops / write-file-webpack-plugin

write-file-webpack-plugin

library4.5.1jsnpmunverified

write-file-webpack-plugin (current version 4.5.1) is a Webpack plugin specifically designed to modify the default behavior of `webpack-dev-server`. By default, `webpack-dev-server` serves bundled assets from an in-memory file system, which can be problematic for specific development workflows requiring physical files on the disk. This includes scenarios like server-side rendering, integration testing with tools watching the file system, or external build processes that rely on the presence of output files. The plugin forces `webpack-dev-server` to write all or selected output files to the designated file system path during development builds. It provides options such as `test` (a regular expression to filter which files are written), `atomicReplace` (to prevent external programs from reading partial files), and `log` (to display written files in the console). Its primary differentiator is enabling file system output when `webpack-dev-server` is in use, a feature not natively available in the dev server. The release cadence is generally tied to Webpack ecosystem updates and bug fixes, though not strictly scheduled.

devops

npm install write-file-webpack-plugin

github ↗package ↗

INSTALL

IMPORT

SIG · WRITE-FILE-WEBPACK

write-file-webpack-plugin

devopsjavascriptv4.5.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

WriteFilePlugin

✓ import WriteFilePlugin from 'write-file-webpack-plugin';

✗ import { WriteFilePlugin } from 'write-file-webpack-plugin';

The plugin exports a default class. Using named import will result in an undefined `WriteFilePlugin`.

WriteFilePlugin (CommonJS)

✓ const WriteFilePlugin = require('write-file-webpack-plugin');

For CommonJS environments, use `require()` to import the default export.

Plugin instance

✓ new WriteFilePlugin({ test: /\.css$/ });

✗ new WriteFilePlugin.default();

The imported `WriteFilePlugin` is a class that needs to be instantiated with `new` and optional configuration.

This quickstart demonstrates how to integrate `write-file-webpack-plugin` into a basic Webpack configuration, ensuring `webpack-dev-server` writes `bundle.js` to the `dist` directory.

import path from 'path'; import WriteFilePlugin from 'write-file-webpack-plugin'; // A basic webpack configuration demonstrating write-file-webpack-plugin export default { mode: 'development', entry: './src/index.js', output: { // Ensure this path exists and is correctly configured for your project path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, plugins: [ // Instantiate the plugin without options to write all bundle files. // Or with options, e.g., to only write CSS files: // new WriteFilePlugin({ // test: /\.css$/, // log: true // }) new WriteFilePlugin() ], devServer: { // Ensure dev server serves from the output path contentBase: path.resolve(__dirname, 'dist'), port: 8080 } };

Debug

Known issues

gotchaThe `write-file-webpack-plugin` has no effect when `webpack` is run directly (e.g., via `webpack` CLI). It is specifically designed to work only with `webpack-dev-server`.

fix

Ensure you are running `webpack-dev-server` if you intend for files to be written to disk. If you need files written during a production build, configure webpack's output path normally without this plugin.

affects: >=1.0.0

gotchaIf the `test` option is used, only files matching the regular expression will be written. Files not matching the pattern will still be served from memory by `webpack-dev-server` but will not appear on disk.

fix

Review your `test` regex to ensure it matches all files you intend to write to the file system. Remove or broaden the `test` option if all files should be written.

affects: >=1.0.0

gotchaPerformance impact when writing large numbers of files or frequently changing files. While `useHashIndex` is enabled by default to write only changed files, frequent disk I/O can still be slower than in-memory operations.

fix

Minimize the number of files written to disk if not strictly necessary, potentially by configuring a more restrictive `test` option. Consider disabling `atomicReplace` if file integrity during writes is not a critical concern and faster writes are needed, though this is generally not recommended.

affects: >=1.0.0

Errors

Common errors & fixes

Error: WriteFilePlugin is not a constructor

Attempting to use `WriteFilePlugin` without `new` keyword or importing it incorrectly as a named import when it's a default export.

fix

Ensure you are using `new WriteFilePlugin()` to instantiate the plugin. If using ES Modules, confirm the import is `import WriteFilePlugin from 'write-file-webpack-plugin';`.

Files are not being written to the file system during development.

The plugin is either not configured, `webpack-dev-server` is not being used, or the `test` option in the plugin configuration is too restrictive.

fix

Verify that `new WriteFilePlugin()` is present in your `webpack.config.js` `plugins` array. Confirm you are running `webpack-dev-server`. If using the `test` option, review its regex to ensure it matches the files you expect to be written.

Upgrade

Version history

4.5.1latest on npm

Audit

Dependencies

webpackrequiredThis is a webpack plugin and requires webpack as a peer dependency to function.

webpack-dev-serveroptionalThe plugin is specifically designed to modify the behavior of webpack-dev-server.

Agent activity

11 hits · last 30 days

node

Resources

githubhttps://github.com/gajus/write-file-webpack-plugin ↗

packagehttps://www.npmjs.com/package/write-file-webpack-plugin ↗