在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:jantimon/html-webpack-plugin开源软件地址:https://github.com/jantimon/html-webpack-plugin开源编程语言:JavaScript 99.9%开源软件介绍:InstallWebpack 5 npm i --save-dev html-webpack-plugin yarn add --dev html-webpack-plugin Webpack 4 npm i --save-dev html-webpack-plugin@4 yarn add --dev html-webpack-plugin@4 This is a webpack plugin that simplifies creation of HTML files to serve your SponsorsThanks for supporting the ongoing improvements to the html-webpack-plugin! Zero ConfigThe PluginsThe
UsageThe plugin will generate an HTML5 file for you that includes all your 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 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack App</title>
<script defer src="index_bundle.js"></script>
</head>
<body>
</body>
</html> If you have multiple If you have any CSS assets in webpack's output (for example, CSS extracted with the mini-css-extract-plugin)
then these will be included with If you have plugins that make use of it, OptionsYou can pass a hash of configuration options to
Here's an example webpack config illustrating how to use these options webpack.config.js {
entry: 'index.js',
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'My App',
filename: 'assets/admin.html'
})
]
} Generating Multiple HTML FilesTo generate more than one HTML file, declare the plugin more than once in your plugins array webpack.config.js {
entry: 'index.js',
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js'
},
plugins: [
new HtmlWebpackPlugin(), // Generates default index.html
new HtmlWebpackPlugin({ // Also generate a test.html
filename: 'test.html',
template: 'src/assets/test.html'
})
]
} Writing Your Own TemplatesIf the default generated HTML doesn't meet your needs you can supply
your own template. The easiest way is to use the Details of other template loaders are documented here. plugins: [
new HtmlWebpackPlugin({
title: 'Custom template',
// Load a custom template (lodash by default)
template: 'index.html'
})
] index.html <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
</body>
</html> If you already have a template loader, you can use it to parse the template.
Please note that this will also happen if you specify the html-loader and use webpack.config.js module: {
loaders: [
{ test: /\.hbs$/, loader: "handlebars-loader" }
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Custom template using Handlebars',
template: 'index.hbs'
})
] You can use the The following variables are available in the template by default (you can extend them using the
The template can also be directly inlined directly into the options object. webpack.config.js new HtmlWebpackPlugin({
templateContent: `
<html>
<body>
<h1>Hello World</h1>
</body>
</html>
`
}) The webpack.config.js new HtmlWebpackPlugin({
inject: false,
templateContent: ({htmlWebpackPlugin}) => `
<html>
<head>
${htmlWebpackPlugin.tags.headTags}
</head>
<body>
<h1>Hello World</h1>
${htmlWebpackPlugin.tags.bodyTags}
</body>
</html>
`
}) Filtering ChunksTo include only certain chunks you can limit the chunks being used webpack.config.js plugins: [
new HtmlWebpackPlugin({
chunks: ['app']
})
] It is also possible to exclude certain chunks by setting the webpack.config.js plugins: [
new HtmlWebpackPlugin({
excludeChunks: [ 'dev-helper' ]
})
] MinificationIf the {
collapseWhitespace: true,
keepClosingSlash: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true
} To use custom html-minifier options
pass an object to To disable minification during production mode set the Meta TagsIf the Please take a look at this well maintained list of almost all possible meta tags. name/content meta tagsMost meta tags are configured by setting a webpack.config.js plugins: [
new HtmlWebpackPlugin({
'meta': {
'viewport': 'width=device-width, initial-scale=1, shrink-to-fit=no',
// Will generate: <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
'theme-color': '#4285f4'
// Will generate: <meta name="theme-color" content="#4285f4">
}
})
] Simulate http response headersThe http-equiv attribute is essentially used to simulate a HTTP response header. webpack.config.js plugins: [
new HtmlWebpackPlugin({
'meta': {
'Content-Security-Policy': { 'http-equiv': 'Content-Security-Policy', 'content': 'default-src https:' },
// Will generate: <meta http-equiv="Content-Security-Policy" content="default-src https:">
// Which equals to the following http header: `Content-Security-Policy: default-src https:`
'set-cookie': { 'http-equiv': 'set-cookie', content: 'name=value; expires=date; path=url' },
// Will generate: <meta http-equiv="set-cookie" content="value; expires=date; path=url">
// Which equals to the following http header: `set-cookie: value; expires=date; path=url`
}
})
] Base TagWhen the The following two are identical and will both insert new HtmlWebpackPlugin({
'base': 'http://example.com/some/page.html'
}) new HtmlWebpackPlugin({
'base': { 'href': 'http://example.com/some/page.html' }
}) The new HtmlWebpackPlugin({
'base': {
'href': 'http://example.com/some/page.html',
'target': '_blank'
}
}) which will inject the element |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论