1. write-file-webpack-plugin
Forces webpack-dev-server to write bundle files to the file system.
write-file-webpack-plugin
Package: write-file-webpack-plugin
Created by: gajus
Last modified: Tue, 11 Apr 2023 03:57:02 GMT
Version: 4.5.1
License: BSD-3-Clause
Downloads: 365,885
Repository: https://github.com/gajus/write-file-webpack-plugin

Install

npm install write-file-webpack-plugin
yarn add write-file-webpack-plugin

write-file-webpack-plugin

NPM version
js-canonical-style

Forces webpack-dev-server program to write bundle files to the file system.

This plugin has no effect when webpack program
is used instead of webpack-dev-server.

Install

 npm install write-file-webpack-plugin --save-dev

API

 /**
 * @typedef {Object} options
 * @property {boolean} atomicReplace Atomically replace files content (i.e., to prevent programs like test watchers from seeing partial files) (default: true).
 * @property {boolean} exitOnErrors Stop writing files on webpack errors (default: true).
 * @property {boolean} force Forces the execution of the plugin regardless of being using `webpack-dev-server` or not (default: false).
 * @property {boolean} log Logs names of the files that are being written (or skipped because they have not changed) (default: true).
 * @property {RegExp} test A regular expression used to test if file should be written. When not present, all bundle will be written.
 * @property {boolean} useHashIndex Use hash index to write only files that have changed since the last iteration (default: true).
 */

/**
 * @param {options} options
 * @returns {Object}
 */
new WriteFilePlugin();

new WriteFilePlugin({
    // Write only files that have ".css" extension.
    test: /\.css$/,
    useHashIndex: true
});

Usage

Configure webpack.config.js to use the write-file-webpack-plugin plugin.

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

export default {
    output: {
        path: path.join(__dirname, './dist')
    },
    plugins: [
        new WriteFilePlugin()
    ],
    // ...
}

See ./sandbox for a working webpack configuration.

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin