❤
npm
Sign UpSign In

manipulate-assets-html-webpack-plugin

0.1.2 • Public • Published

manipulate-assets-html-webpack-plugin

Manipulate assets on the way to the HTML generated by html-webpack-plugin

NPM Version

a fork of SimenB/add-asset-html-webpack-plugin

  • still very raw initial version, done out of need in making a webpack setup crafting a dual module/nomodule build (es5/es6)

Installation

Install the plugin with npm:

$ npm i manipulate-assets-html-webpack-plugin -D

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

Migrating to webpack 4+

After webpack 4+, it is required to apply AddAssetHtmlPlugin after HtmlWebpackPlugin to register html-webpack-plugin-before-html-generation hook which is used inside first, while previous versions of webpack do not care about it.

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:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
const 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') },
  // Glob to match all of the dll file
  { filepath: require.resolve('./**/*.dll.js') },
]);

Options

Readme

Keywords

Package Sidebar

Install

npm i manipulate-assets-html-webpack-plugin

Repository

github.com/Algotec/manipulate-assets-html-webpack-plugin

Homepage

github.com/Algotec/manipulate-assets-html-webpack-plugin#readme

Weekly Downloads

1

Version

0.1.2

License

MIT

Unpacked Size

15.1 kB

Total Files

8

Last publish

Collaborators

  • nadavsinai
Try on RunKit
Report malware