https://github.com/neatsoftware/inline-assets-html-plugin
A plugin extension of the webpack html-webpack-plugin to inline assets directly into the html file.
https://github.com/neatsoftware/inline-assets-html-plugin
Last synced: 8 months ago
JSON representation
A plugin extension of the webpack html-webpack-plugin to inline assets directly into the html file.
- Host: GitHub
- URL: https://github.com/neatsoftware/inline-assets-html-plugin
- Owner: neatsoftware
- Created: 2020-09-29T14:40:42.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-11-04T15:13:47.000Z (over 4 years ago)
- Last Synced: 2025-10-09T18:59:57.043Z (8 months ago)
- Language: JavaScript
- Homepage:
- Size: 41 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Inline Assets HTML Plugin
A plugin extension of the webpack html-webpack-plugin to inline assets directly into the html file.
## Installation
```
npm install inline-assets-html-plugin -D
```
## Usage
```js
const HtmlWebpackPlugin = require('html-webpack-plugin')
const InlineAssetsHtmlPlugin = require('inline-assets-html-plugin')
const webpackConfig = {
// ... other config options
plugins: [
new HtmlWebpackPlugin({
// ... your other html-webpack-plugin options ...
cache: false // Turn off caching during development so hot-reloading can re-inline the files on change
}),
new InlineAssetsHtmlPlugin({
test: /\.(css|js)$/, // Required: regexp test of files to inline,
emit: false // Optional: to emit the files that were inlined. Defaults to false (remove the files)
})
]
}
```
### Notes
To inline css files to a style tag, you also need to have the `mini-css-extract-plugin` installed and set up to generate css files to be inlined. If you simply use style-loader, the styles will be applied by the js code.