Skip to content

Webpack plugin to generate an html fragment with asset tag(s).

License

Notifications You must be signed in to change notification settings

rei/asset-tag-frag-webpack-plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

53 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Build Status

asset-tag-frag-webpack-plugin

Description

A Webpack plugin that generates HTML fragments for your build assets.

Usage

Basic Usage

// webpack.conf.js
const AssetTagPlugin = require('asset-tag-frag-webpack-plugin');

module.exports = 
  {
    entry: {
      app: '/path/to/app'
    },
    output: {
      path: '/path/to/output',
      name: [name].bundle.js
    } 
  },
  ...
  {
    ..
    plugins: [
      new AssetTagPlugin()
    ]
  }

This will write your js and css asset tags to 2 files:

  • <output dir>/assets.js.html
  • <output dir>/assets.css.html

Plugin Options

You may pass an options object to the plugin to customize the filenames you want to write tags to as well as tag attributes you want to include in the tag.

NOTE: for now, all tag attributes you specify are included in corresponding js/css tags.

  new AssetPlugin({
    js: {
      filename:    {String},  // name of assets fragment file
      prependPath: {String},  // path to prepend
      tagProps:    {Object},  // additional tag properties
      
    },
    css: {
      filename:    {String},
      prependPath: {String},
      tagProps:    {Object},
      
    }
  })

Example

new AssetTagPlugin({
  js: {
    filename: "js-assets.html",
    prependPath: "/static/",
    tagProps: {
      async: true
    },
  },
  css: {
    filename: "css-assets.html",
    prependPath: "/static/",
    tagProps: {
      id: "css-app-bundle"
    }
  }
})

This would generate 2 files in your output directory:

<!-- js-assets.html -->
<script src="/static/app.bundle.js" async=true></script>
<!--css-assets.html -->
<link href="/static/app.bundle.css" id="css-app-bundle">

Assumptions

  • This assumes you are using webpack ^3.0.0. It has not been tested with older versions.