Package Exports

add-asset-html-webpack-plugin

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (add-asset-html-webpack-plugin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

add-asset-html-webpack-plugin

Add a JavaScript or CSS asset to the HTML generated by html-webpack-plugin

Installation

Install the plugin with npm:

$ npm i add-asset-html-webpack-plugin -D

Basic Usage

The plugin will add the given JS or CSS file to the files Webpack knows about, and put it into the list of assets html-webpack-plugin injects into the generated html. Add the plugin the your config, providing it a filename:

var HtmlWebpackPlugin = require('html-webpack-plugin')
var AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
var webpackConfig = {
  entry: 'index.js',
  output: {
    path: 'dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new AddAssetHtmlPlugin({ filename: require.resolve('./some-file') })
  ]
}

This will add a script tag to the HTML generated by html-webpack-plugin, and look like:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
    <script src="index_bundle.js"></script>
    <script src="some-file.js"></script>
  </body>
</html>

Options

Options are passed to the plugin during instantiation.

new AddAssetHtmlPlugin({ filename: require.resolve('./some-file') })

`filename`

Type: string, mandatory

The absolute path of the file you want to add to the compilation, and resulting HTML file.

`includeSourcemap`

Type: boolean, default: false

If true, will add filename + '.map' to the compilation as well.

`typeOfAsset`

Type: string, default: js

Can be set to css to create a link-tag instead of a script-tag.

Examples

Add a DLL file from webpack.DllPlugin

Note: Remember to build the DLL file in a separate build.

When adding assets, it's added to the start of the array, so when html-webpack-plugin injects the assets, it's before other assets. If you depend on some order for the assets beyond that, you'll have to create some sort of intermediate file in the given order.

Webpack config

var path = require('path')
var webpack = require('webpack')
var webpackConfig = {
  entry: {
    vendor: ['react', 'redux', 'react-router']
  },
  devtool: '#source-map',
  output: {
    path: path.join(__dirname, 'build'),
    filename: '[name].dll.js',
    library: '[name]_[hash]'
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, 'build', '[name]-manifest.json'),
      name: '[name]_[hash]'
    }),
  ],
}

Your main build:

var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
var webpackConfig = {
  entry: 'index.js',
  output: {
    path: 'dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new webpack.DllReferencePlugin({
      context: path.join(__dirname),
      manifest: require('./build/vendor-manifest.json')
    }),
    new HtmlWebpackPlugin(),
    new AddAssetHtmlPlugin({
      filename: require.resolve('./build/vendor.dll.js'),
      includeSourcemap: true
    })
  ]
}