html-webpack-assets-insert-plugin
Advanced tools
Enhances html-webpack-plugin functionality with script and style elements insert to html file.
Enhances html-webpack-plugin functionality with different deployment options for your html.
This is an extension plugin for the webpack plugin html-webpack-plugin - a plugin that simplifies the creation of HTML files to serve your webpack bundles.
The raw html-webpack-plugin incorporates all webpack-generated javascipt as <script> elements and css as <link> elements in the generated html. This plugin allows you to:
You must be running webpack (3.x, 4.x) on node 8+. Install the plugin with npm:
$ npm install html-webpack-assets-insert-plugin -D
# or
$ yarn install html-webpack-assets-insert-plugin -D
Not that you will need v3.x or v4.x of html-webpack-plugin
You may see an UNMET PEER DEPENDENCY warnings for webpack and various plugins.
Add the plugin to your webpack config as follows:
plugins: [
new HtmlWebpackPlugin(),
new HtmlWebpackAssetsInsertPlugin({
js: {
prepend: true,
path: [
"https://cdn.jsdelivr.net/npm/vue",
"https://cdn.jsdelivr.net/npm/vue-router",
],
},
css: {
prepend: false,
path: ["http://testcss.com/test.css"],
},
}),
];
The effect of the compiled:
<head>
....
<link href="http://testcss.com/test.css" rel="stylesheet" />
</head>
<body>
...
<!-- add by plugin -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router"></script>
<!-- add by nuxt -->
<script src="/_nuxt/runtime.9458cd8.js"></script>
<script src="/_nuxt/commons/app.0872ce0.js"></script>
<script src="/_nuxt/vendors~app.7b9299e.js"></script>
<script src="/_nuxt/app.28d1ccd.js"></script>
</body>
In the vue-cli configuration file:
configureWebpack: (config) => {
config.plugins.push(
new HtmlWebpackAssetsInsertPlugin({
js: {
prepend: true,
path: [""],
},
css: {
path: [],
},
})
);
};
In the nuxt.js configuration file:
build: {
extend (config, { isClient }) {
if (isClient) {
config.plugins.push(new HtmlWebpackAssetsInsertPlugin({
js: {
prepend: true,
path: [
'',
''
]
},
css: {
prepend: false
}
}))
// externals config
// config.externals = {
// vue: 'Vue',
// axios: 'axios',
// }
}
}
}
The order is important - the plugin must come after HtmlWebpackPlugin.
| Options | Type | Other |
|---|---|---|
| js | Object | |
| css | Object |
| Options | Type | Other |
|---|---|---|
| prepend | boolean | Set the script tags insertion position. Default is true. |
| path | Array | Insert script tags according to array index. |
| Options | Type | Other |
|---|---|---|
| prepend | boolean | Set the link tags insertion position. Default is false. |
| path | Array | Insert link tags according to array index. |
v1.0.4
v1.0.1
v0.0.1
FAQs
Enhances html-webpack-plugin functionality with script and style elements insert to html file.
The npm package html-webpack-assets-insert-plugin receives a total of 8 weekly downloads. As such, html-webpack-assets-insert-plugin popularity was classified as not popular.
We found that html-webpack-assets-insert-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
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
Research
Security News
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.
Security News
The official Go SDK for the Model Context Protocol is in development, with a stable, production-ready release expected by August 2025.