Product
Reachability for Ruby Now in Beta
Reachability analysis for Ruby is now in beta, helping teams identify which vulnerabilities are truly exploitable in their applications.
By Oskar Haarklou Veileborg -  Nov 17, 2025
🚀 DAY 1 OF LAUNCH WEEK: Reachability for Ruby Now in Beta.Learn more →
inline-source-webpack-plugin
Advanced tools
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
$ npm i inline-source-webpack-plugin -D
example
<!-- ./demo/src/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link href="inline.css" inline="true">
<script src="inline.js" inline="true"></script>
</head>
<body>
<div class="container">
<h1>hello world!</h1>
</div>
<!-- 'inline-asset' attribute tell us to embed file that generated by webpack -->
<script inline inline-asset="runtime\.\w+\.js$" inline-asset-delete></script>
<script inline inline-asset="bundle\.\w+\.js$" inline-asset-delete></script>
</body>
</html>
You can find this demo in the demo directory and view the output:
# install dependency
npm i
# build demo
npm run build:demo
Usage
Available options include(refer to this for more options):
compress: enable/disable compression.(defaultfalse)rootpath: path used for resolving inlineable paths.noAssetMatchReplace: work withnoAssetMatchoption.(default<!-- -->)noAssetMatch: define the behaviour while no asset match the value ofinline-assetattribute.(defaultnone)none: do nothing and the tag is still reserved in the html.warn: throw warning tips and replace the tag with the content ofnoAssetMatchReplaceoption.error: throw error tips and replace the tag with the content ofnoAssetMatchReplaceoption(This level will affect the compilation of webpack).
// 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.
<script inline inline-asset-delete inline-asset="Your asset path/Your asset name"></script>
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
FAQs
A inline-source plugin for webpack
We found that inline-source-webpack-plugin demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 23 Oct 2022
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Research
/Security News
npm Malware Campaign Uses Adspect Cloaking to Deliver Malicious Redirects
Malicious npm packages use Adspect cloaking and fake CAPTCHAs to fingerprint visitors and redirect victims to crypto-themed scam sites.
By Olivia Brown -  Nov 17, 2025
Security News
Another Round of TEA Protocol Spam Floods npm, But It’s Not a Worm
Recent coverage mislabels the latest TEA protocol spam as a worm. Here’s what’s actually happening.
By Philipp Burckhardt -  Nov 14, 2025