webpack html加载完毕,html-webpack-plugin

安装

npm i -D html-webpack-plugin

参数

类型

默认值

描述

title

String

Webpack App

用于生成html的head.title

filename

String

index.html

默认输出的文件名,可以自定义,如: "dist/demo.html"

template

String

''

文件相对于webpack配置的路径(绝对或相对),默认值是: "src/index.ejs"(如果存在)

templateContent

string/Function/false

false

提供html模板,将此模板替换到输出的html文件里

templateParameters

Boolean/Object/Function

false

允许将指定的内容替换为自定义的内容

inject

Boolean/String

true

取值范围:true/'head'/'body'/false,true或'body':表示追加到html.body末尾,'head':表示注入到html.head中,false表示禁用

scriptLoading

blocking/defer

blocking

现代浏览器加载js的方式,使用defer来提高页面启动性能。

favicon

String

''

配置favicon路径,来输出到html

meta

Object

{}

允许注入mete元信息.

base

Object/String/false

false

注入基本tag. 如:base:"https://example.com/path/page.html

minify

Boolean/Object

生产模式:true,其他模式:false

控制以何种方式来压缩输出。false表示不压缩

hash

Boolean

false

通过hash方式来减小缓存影响

cache

Boolean

true

是否启用缓存

showErrors

Boolean

true

编译出错时是否将错误信息写入到输出的html

chunk

?

?

细化chunk配置

chunksSortMode

String/Function

auto

配置chunk输出到html前的排序规则. 取值范围:'none'/ 'auto' / 'manual'/ Function

excludeChunks

Array.

``

设置chunk的排除规则

xhtml

Boolean

false

是否开启标签自闭合

单页面示例配置

{

...

plugins: [new HtmlWebpackPlugin()]

...

}

多页面示例配置

{

...

plugins: [

new HtmlWebpackPlugin({ // 默认页面

filename: 'index.html',

template: 'src/assets/index.html'

}),

new HtmlWebpackPlugin({ // Also generate a test.html

filename: 'test.html',

template: 'src/assets/test.html'

})

]

...

}

摘录一些常用的属性说明:

title

webpack.config.js

new HtmlWebpackPlugin({

title: 'My App',

filename: 'assets/admin.html'

})

index.html

...

...

输出

...

My App

...

filename

配置输出html的名称和路径.

1 如果不指定路径,html将直接output.path配置的路径下,如: ('./build'目录)

2 指定路径后将会输出到output.path下,并创建相应目录,如:

const {resolve} = require('path')

module.exports = {

output: {

filename: 'build.js', // 输出文件名

path: resolve(__dirname, 'build') // 输出路径

},

...

plugins:[

new HtmlWebpackPlugin({

filename:'assets/index.html'

})

]

...

}

将会输出到

./build/asstes/index.html

template

根据指定模板编译输出内容到目标html

伪代码如下:

const {resolve} = require('path');

module.exports = {

...

plugins:[

new HtmlWebpackPlugin({

...

path: 'index.html',

template: resolve(__dirname,'../src/index.html'),

...

})

]

}

templateContent

1 以html字符串的方式代替template模板

2 templateContent优先级高于template,当templateContent与template配置同时存在时,以templateContent为准.

const {resolve} = require('path');

module.exports = {

...

plugins:[

new HtmlWebpackPlugin({

...

path: 'index.html',

templateContent: ({htmlWebpackPlugin}) => `

${htmlWebpackPlugin.tags.headTags}

Hello World

${htmlWebpackPlugin.tags.bodyTags}

`,

...

})

]

}

inject

配置将一些内容输出到html文档的什么位置: head或body

1 true或'body'时输出到 html.body

2 'head'时输出到 html.head

3 false时不会输出

scriptLoading

设置

1 'blocking': 默认模式,会阻塞页面加载,直到加载完成

2 'defer': 延迟加载,需要根据"加载的js是否会改变html文档"的原则来添加

meta

赋予配置添加meta的能力

plugins: [

new HtmlWebpackPlugin({

'meta': {

// 生成:

'viewport': 'width=device-width, initial-scale=1, shrink-to-fit=no',

// 生成:

'theme-color': '#4285f4'

}

})

]

plugins: [

new HtmlWebpackPlugin({

'meta': {

// 生成:

// 等价于这个 http header: `Content-Security-Policy: default-src https:`

'Content-Security-Policy': { 'http-equiv': 'Content-Security-Policy', 'content': 'default-src https:' },

// 生成:

// 等价于这个 http header: `set-cookie: value; expires=date; path=url`

'set-cookie': { 'http-equiv': 'set-cookie', content: 'name=value; expires=date; path=url' },

}

})

]

minify

1 在生产环境(mode = 'production')默认开启(true),可以不配置minify属性即可使用,但是如果想要自定义,需要显示定义HtmlWebpackPlugin.minify属性

2 非生产环境下,也可以通过下面的配置来进行自定义配置

minify: {

collapseWhitespace: true, // 是否去除空白字符,包括空格和换行符

removeComments: true, // 是否移除注释

removeRedundantAttributes: true, // 去除冗余属性

removeScriptTypeAttributes: true, // 去除script类型属性

removeStyleLinkTypeAttributes: true, // 去除style和link类型属性

useShortDoctype: true //

}

chunk + excludeChunks

1 chunk: 设置要打包的模块

2 excludeChunks 设置排除的模块

伪代码如下:

chunks: ['app']

excludeChunks: [ 'dev-helper' ]

chunksSortMode