Assets Extension for HTML Webpack Plugin
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:
- add script tags to html file;
- add style tags to html file;
Installation
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.
Basic Usage
Add the plugin to your webpack config as follows:
plugins: 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:
.... ... <!-- add by plugin --> <!-- add by nuxt -->
In the vue-cli configuration file:
{ configplugins;};
In the nuxt.js configuration file:
build: { if isClient configplugins // externals config // config.externals = { // vue: 'Vue', // axios: 'axios', // } }
The order is important - the plugin must come after HtmlWebpackPlugin.
Options
Options | Type | Other |
---|---|---|
js | Object | |
css | Object |
Options(js)
Options | Type | Other |
---|---|---|
prepend | boolean | Set the script tags insertion position. Default is true. |
path | Array | Insert script tags according to array index. |
Options(css)
Options | Type | Other |
---|---|---|
prepend | boolean | Set the link tags insertion position. Default is false. |
path | Array | Insert link tags according to array index. |
release
v1.0.4
- modify readme
v1.0.1
- initial release
v0.0.1
- initial