Source Inline Webpack Plugin

This webpack plugin is 3rd party addon to HtmlWebpackPlugin.

Installation

Install the plugin with npm:

$ npm install source-inline-webpack-plugin --save-dev

Install the plugin with yarn:

$ yarn source-inline-webpack-plugin --dev

Basic Usage

This plugin will inline all script tags that have an inline attribute.

<html>
  <head>
    <script inline src="./example.js"></script>
  </head>
</html>

Will generate:

<html>
  <head>
    <script>
      const example = 'js'
    </script>
  </head>
</html>

Advanced Usage

There is also the inline-prod attribute, which will only inline the asset if NODE_ENV === 'production' or the env variable INLINE_PROD is truthy. Otherwise, it removes the script tag from the HTML document. This is useful for analytics scripts that should only be included in production environments.

If not a production environemnt

<html>
  <head>
    <script inline src="./example.js"></script>
    <script inline-prod src="./example-prod.js"></script>
  </head>
</html>

Will generate:

<html>
  <head>
    <script>
      const example = 'js'
    </script>
  </head>
</html>

If on a production environment

<html>
  <head>
    <script inline src="./example.js"></script>
    <script inline-prod src="./example-prod.js"></script>
  </head>
</html>

Will generate:

<html>
  <head>
    <script>
      const example = 'js'
    </script>
    <script>
      const exampleProd = 'prod'
    </script>
  </head>
</html>

Supported Assets Types

script <script inline src="./example.js"></script>
style <link inline href="./example.css" />
img <img inline href="./example.png" />
svg <img inline href="./example.svg" />
remote assets <link inline href="http://example.com/bootstrap-6.1.css" />