html打开加载alex,GitHub - AlexLosynets/html-webpack-plugin: Simplifies creation of HTML files to serve y...

HTML Webpack Plugin

Plugin that simplifies creation of HTML files to serve your bundles

Install Alpha

npm i --save-dev html-webpack-plugin@next

yarn add --dev html-webpack-plugin@next

Install Stable

npm i --save-dev html-webpack-plugin

yarn add --dev html-webpack-plugin

This is a webpack plugin that simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation. You can either let the plugin generate an HTML file for you, supply

your own template using lodash templates or use your own loader.

Plugins

The html-webpack-plugin provides hooks to extend it to your needs. There are already some really powerful plugins which can be integrated with zero configuration

appcache-webpack-plugin for iOS and Android offline usage

favicons-webpack-plugin which generates favicons and icons for iOS, Android and desktop browsers

html-webpack-harddisk-plugin can be used to always write to disk the html file, useful when webpack-dev-server / HMR are being used

html-webpack-inline-source-plugin to inline your assets in the resulting HTML file

html-webpack-inline-svg-plugin to inline SVGs in the resulting HTML file.

html-webpack-exclude-assets-plugin for excluding assets using regular expressions

html-webpack-include-assets-plugin for including lists of js or css file paths (such as those copied by the copy-webpack-plugin).

script-ext-html-webpack-plugin to add async, defer or module attributes to your

style-ext-html-webpack-plugin to convert your s to external stylesheets into

resource-hints-webpack-plugin to add resource hints for faster initial page loads using and

preload-webpack-plugin for automatically wiring up asynchronous (and other types) of JavaScript chunks using helping with lazy-loading

link-media-html-webpack-plugin allows for injected stylesheet tags to have their media attribute set automatically; useful for providing specific desktop/mobile/print etc. stylesheets that the browser will conditionally download

inline-chunk-manifest-html-webpack-plugin for inlining webpack's chunk manifest. Default extracts manifest and inlines in

html-webpack-inline-style-plugin for inlining styles to HTML elements using juice. Useful for email generation automatisation.

html-webpack-exclude-empty-assets-plugin removes empty assets from being added to the html. This fixes some problems with extract-text-plugin with webpack 4.

webpack-concat-plugin for concat and uglify files that needn't to be webpack bundles(for legacy files) and inject to html-webpack-plugin.

Usage

The plugin will generate an HTML5 file for you that includes all your webpack

bundles in the body using script tags. Just add the plugin to your webpack

config as follows:

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {

entry: 'index.js',

output: {

path: __dirname + '/dist',

filename: 'index_bundle.js'

},

plugins: [

new HtmlWebpackPlugin()

]

}

This will generate a file dist/index.html containing the following

Webpack App