1. html-webpack-harddisk-plugin
Write html files to hard disk even when using the webpack dev server or middleware
html-webpack-harddisk-plugin
Package: html-webpack-harddisk-plugin
Created by: jantimon
Last modified: Sat, 18 Jun 2022 21:59:37 GMT
Version: 2.0.0
License: MIT
Downloads: 466,273
Repository: https://github.com/jantimon/html-webpack-harddisk-plugin

Install

npm install html-webpack-harddisk-plugin
yarn add html-webpack-harddisk-plugin

Harddisk extension for the HTML Webpack Plugin

npm version Dependency Status Build Status js-semistandard-style

Enhances html-webpack-plugin
functionality by adding the {alwaysWriteToDisk: true|false} option.

This is an extension plugin for the webpack plugin html-webpack-plugin - a plugin that simplifies the creation of HTML files to serve your webpack bundles.

Installation

You must be running webpack on node 10.x or higher

Install the plugin with npm:

 $ npm install --save-dev html-webpack-harddisk-plugin

Basic Usage

Require the plugin in your webpack config:

 const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');

Add the plugin to your webpack config as follows:

 plugins: [
  new HtmlWebpackPlugin(),
  new HtmlWebpackHarddiskPlugin()
]  

The above configuration will actually do nothing due to the configuration defaults.

As soon as you now set alwaysWriteToDisk to true the generated output of the HtmlWebpackPlugin will
always be written to disk. This is very useful if you want to pick up the output with another middleware.

 plugins: [
  new HtmlWebpackPlugin({
		alwaysWriteToDisk: true
	}),
  new HtmlWebpackHarddiskPlugin()
]  

Even if you generate multiple files make sure that you add the HtmlWebpackHarddiskPlugin only once:

 plugins: [
  new HtmlWebpackPlugin({
		alwaysWriteToDisk: true
	}),
  new HtmlWebpackPlugin({
		alwaysWriteToDisk: true,
		filename: 'demo.html'
	}),
  new HtmlWebpackPlugin({
		alwaysWriteToDisk: false,
		filename: 'test.html'
	}),
  new HtmlWebpackHarddiskPlugin()
]  

If you need to set the output path explicitly (for example when using with webpack-dev-server middleware) then pass in the outputPath option:

 new HtmlWebpackHarddiskPlugin({
  outputPath: path.resolve(__dirname, 'views')
})

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