Home Original page

GitHub - yulingchen/add-asset-html-webpack-plugin

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

NPM Version Linux & Mac Build Status Windows Build Status Code Coverage branch

Dependency Status Dev Dependency Status Peer Dependency Status

Installation

Install the plugin with npm:

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

NOTE: This plugin requires html-webpack-plugin@^2.10.0.

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 filepath:

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({ filepath: 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>

NOTE: You can also pass an array of assets to be added. Same API as mentioned below, just pass multiple objects as an array.

new AddAssetHtmlPlugin([
  { filepath: require.resolve('./some-file') }, 
  { filepath: require.resolve('./some-other-file') }
])

Options

Options are passed to the plugin during instantiation.

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

filepath

Type: string, mandatory

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

hash

Type: boolean, default: false

If true, will append a unique hash of the file to the filename. This is useful for cache busting.

includeSourcemap

Type: boolean, default: true

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

outputPath

Type: string

If set, will be used as the output directory of the file.

publicPath

Type: string

If set, will be used as the public path of the script or link tag.

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, and ordering the plugins doesn't cut it, you'll have to create a custom template and add the tags yourself.

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'),
    filepath: '[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',
    filepath: 'index_bundle.js'
  },
  plugins: [
    new webpack.DllReferencePlugin({
      context: path.join(__dirname),
      manifest: require('./build/vendor-manifest.json')
    }),
    new HtmlWebpackPlugin(),
    new AddAssetHtmlPlugin({
      filepath: require.resolve('./build/vendor.dll.js'),
      includeSourcemap: true
    })
  ]
}