/source-inline-webpack-plugin

Inline your assets

Primary LanguageTypeScript

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 add 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 and inline-staging attributes, which will only inline the asset if NODE_ENV === '[production|staging]' or the env variable INLINE_[PROD|STAGING] 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-staging src="./example-staging.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 staging environment

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

Will generate:

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

If on a production environment

<html>
  <head>
    <script inline src="./example.js"></script>
    <script inline-staging src="./example-staging.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" />