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.
Will generate:
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
Will generate:
If on a staging environment
Will generate:
If on a production environment
Will generate:
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" />