inline-source-webpack-plugin
Advanced tools
A webpack plugin to embed css/js resource in the html with inline-source module(html-webpack-plugin is needed).
$ npm i inline-source-webpack-plugin -D
<!-- ./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
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).// 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;
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.
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.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.