Html-layout-plugin NPM

Layout extension for the HTML Webpack Plugin

Installation

You must be running webpack 4 on node 9.x or higher

Install the plugin with npm:

$ npm install --save-dev html-layout-plugin

Basic Usage

Add the plugin to your webpack config as follows:

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

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

As soon as you now set layout to a path the generated output of the HtmlWebpackPlugin will always add a layout.

plugins: [
  new HtmlWebpackPlugin({
		layout: path.join(__dirname, 'layout.html')
	}),
  new HtmlLayoutPlugin()
]

layout.html

<html>
	<head></head>
	<body>
		{{content}}
	</body>
</html>

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

plugins: [
  new HtmlWebpackPlugin({
		layout: path.join(__dirname, 'layout.html')
	}),
  new HtmlWebpackPlugin({
		layout: path.join(__dirname, 'layout.html'),
		filename: 'demo.html'
	}),
  new HtmlWebpackPlugin({
		layout: path.join(__dirname, 'layout.html'),
		filename: 'test.html'
	}),
  new HtmlLayoutPlugin()
]

html webpack 4 layout plugin

@infinitebrahmanuniverse/nolb-html-l @everything-registry/sub-chunk-1867

0.0.1

6 years ago