html-webpack-scripts-plugin

html-webpack-scripts-plugin improves control over scripts generated by Webpack.

Introduction

html-webpack-plugin will add scripts generated by Webpack into generated HTML like <script type="text/javascript" src="/bundle/vendor.0a78e31b5c440.js"></script> without need to include them manually. However it won't give you additional control. For example you can't set defer attribute or make them inline.

This plugin is similar to script-ext-html-webpack-plugin, however it won't work in conjunction with html-webpack-template meanwhile html-webpack-scripts-plugin will.

Installation

npm install html-webpack-plugin --save-dev (Must be installed)
npm install html-webpack-scripts-plugin --save-dev

Usage

Suppose you have two scripts generated by webpack: vendor.0a78e31b5c440.js app.4234fe71c300ea.js Plugin gives you ability to:

Add specific attributes like async defer id charset:

 
// webpack.config.js
 
const HtmlWebpackScriptsPlugin = require('html-webpack-scripts-plugin')
const HtmlWebpackScriptsPluginInstance = new HtmlWebpackScriptsPlugin({
    'defer charset=utf-8': /vendor/,
    'async id=appscript': /app/
})
module.exports = {
    ...
    plugins: [..., HtmlWebpackScriptsPluginInstance]
    ...
} 

Output:

<script defer charset="utf-8" type="text/javascript" src="vendor.0a78e31b5c440.js"></script>
<script async id="appscript" type="text/javascript" src="app.4234fe71c300ea.js"></script>

Add custom attributes like data-*

 
// webpack.config.js
 
const HtmlWebpackScriptsPlugin = require('html-webpack-scripts-plugin')
const HtmlWebpackScriptsPluginInstance = new HtmlWebpackScriptsPlugin({
    'defer data-script-defer=true': /vendor/, 
    'charset=utf-8 id=appscript inline data-script-inline=true': /app/
})
module.exports = {
    ...
    plugins: [..., HtmlWebpackScriptsPluginInstance]
    ...
}

Output:

<script defer data-script-defer="true" type="text/javascript" src="vendor.0a78e31b5c440.js"></script>
<script charset="utf-8" id="appscript" data-script-inline="true" type="text/javascript"> /* Content of app.4234fe71c300ea.js */ </script> 

Make scripts inline:

// vendor.0a78e31b5c440.js
console.log('Hi')
 
// app.4234fe71c300ea.js
console.log('Webpack')

 
// webpack.config.js
 
const HtmlWebpackScriptsPlugin = require('html-webpack-scripts-plugin')
const HtmlWebpackScriptsPluginInstance = new HtmlWebpackScriptsPlugin({ inline: /vendor|app/ })
module.exports = {
    ...
    plugins: [..., HtmlWebpackScriptsPluginInstance]
    ...
}

Output:

<script type="text/javascript">console.log('Hi')</script> 
<script type="text/javascript">console.log('Webpack')</script> 

Template extension:

By default html-webpack-plugin generates .html file. In case if it generates file with different extension you can specify extension manually:

 
const HtmlWebpackScriptsPlugin = require('html-webpack-scripts-plugin')
const HtmlWebpackScriptsPluginInstance = new HtmlWebpackScriptsPlugin({
    templateExtension: 'ext',
    inline: /\.js$/
})