!Codecov

inline-source-webpack-plugin

A webpack plugin to embed css/js resource in the html with inline-source module(html-webpack-plugin is needed).

Install

``bash
$ npm i inline-source-webpack-plugin -D
`

example

`html


















`

You can find this demo in the demo directory and view the output:

`bash


install dependency

npm i

build demo

npm run build:demo
`

Usage

Available options include(refer to this for more options):

- compress: enable/disable compression.(default false)
- rootpath: path used for resolving inlineable paths.
- noAssetMatchReplace: work with noAssetMatch option.(default )
- noAssetMatch: define the behaviour while no asset match the value of inline-asset attribute.(default none)
- none: do nothing and the tag is still reserved in the html.
- warn: throw warning tips and replace the tag with the content of noAssetMatchReplace option.
- error: throw error tips and replace the tag with the content of noAssetMatchReplace option(This level will affect the compilation of webpack).

`javascript
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const InlineSourceWebpackPlugin = require('inline-source-webpack-plugin');

module.exports = {
...,
plugins: [
new HtmlWebpackPlugin({
...
}),
new InlineSourceWebpackPlugin({
compress: true,
rootpath: './src',
noAssetMatch: 'warn'
})
]
};
`

If you want to embed the files that generated by webpack or other plugin, you can use inline-asset attribute to filter the files(Please don't try to use src or href).
Add inline-asset-delete attribute for deleting the asset after inline task.

`html

`

The value of inline-asset attribute is a regular expression.

Note: For inline-asset feature, you may notice the 'no asset match' warning or error in developement mode as you write the regular expression for the production mode.Just ignore the 'no asset match' warning or error while in developement mode.Or you can provide noAssetMatch` option for ignoring the warning or error;

License

MIT License