html-next-line-replace-webpack-plugindeprecated

A webpack plugin which helps to replace script tag and href tag in HTML files with new tag that has appropricate path to your build js and css files.

Usage no npm install needed!

<script type="module">
  import htmlNextLineReplaceWebpackPlugin from 'https://cdn.skypack.dev/html-next-line-replace-webpack-plugin';
</script>

README

About this

A Webpack plugin which helps to replace script tag and href tag HTML files with new tag that has appropriate path to your build js and css files.

This is usefull when you build your js and css assets using [chunkhash] in output file name.

What it does

It will read the HTML files, replace the line has the <!--@replace()--> annotation and the line next to with appropricate script tag (for js) or href tag (for css), then save new HTML files into new place.

Installation

npm i html-next-line-replace-webpack-plugin --save-dev

Usage

In HTML files:

    <!--@replace(js, entry_name)-->
    <script src="/any/path/to/script.js"></script>
 
    <!--@replace(css, entry_name)-->
    <link rel="stylesheet" href="/any/path/to/styles.css">
        
    <!--@replace(css, entry_name)-->
    [empty_line]

In Wepback config file:

    var HTMLNextLineReplace = require('html-next-line-replace-webpack-plugin')
    module.exports = {
        entry: [...],
        output: {
            publicPath: '...',
            filename: '[name].[chunkhash].js'
        },
        plugins: [
            new HTMLNextLineReplace({
                root: '/',
                src: 'path/to/html/src/directory',
                dest: 'path/to/html/dest/directory'
            })
        ]
    }

API

  • new HTMLNextLineReplace({root, src, dest})
    • root: will be add to the begining of the path in new script tag or css tag.
    • src: path to HTML files to run this plugin.
    • dest: path to where to save new HTML files.