插件 html-webpack-plugin 的详解

最近在学习webpack，接触到的第一个插件就是

html-webpack-plugin

复制代码

,那么今天就来详解一下它的用法吧。
先来上一个例子：

var htmlWebpackPlugin = require('html-webpack-plugin')

复制代码

const path = require('path')

复制代码

module.exports = {

复制代码

entry: './src/script/main.js',

复制代码

output: {

复制代码

filename: 'js/bundle.js',

复制代码

path: path.resolve(__dirname, 'dist')

复制代码

},

复制代码

plugins: [

复制代码

new htmlWebpackPlugin({

复制代码

filename: 'index.html',

复制代码

template: 'index.html',

复制代码

inject: 'head'

复制代码

})

复制代码

]

复制代码

}

复制代码

配置属性

title
生成html文件的标题
filename
就是html文件的文件名，默认是index.html
template
指定你生成的文件所依赖哪一个html文件模板，模板类型可以是html、jade、ejs等。但是要注意的是，如果想使用自定义的模板文件的时候，你需要安装对应的

loader

复制代码

哦。
举例子：

[/code][list][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][/list][code]$ npm install jade-loader --save-dev// webpack.config.js

复制代码

...

复制代码

loaders: {

复制代码

...

复制代码

{

复制代码

test: /\.jade$/,

复制代码

loader: 'jade'

复制代码

}

复制代码

}

复制代码

plugins: [

复制代码

new HtmlWebpackPlugin({

复制代码

...

复制代码

jade: 'path/to/yourfile.jade'

复制代码

})

复制代码

]

复制代码

如果你设置的

title

复制代码

和

filename

复制代码

于模板中发生了冲突，那么以你的

title

复制代码

和

filename

复制代码

的配置值为准。
inject
inject有四个值：

true

复制代码

body

复制代码

head

复制代码

false

复制代码

true

复制代码

默认值，script标签位于html文件的 body 底部

body

复制代码

script标签位于html文件的 body 底部

head

复制代码

script标签位于html文件的 head中

false

复制代码

不插入生成的js文件，这个几乎不会用到的
favicon
给你生成的html文件生成一个

favicon

复制代码

,值是一个路径

plugins: [

复制代码

new HtmlWebpackPlugin({

复制代码

...

复制代码

favicon: 'path/to/my_favicon.ico'

复制代码

})

复制代码

然后再生成的html中就有了一个

link

复制代码

标签

[/code][code]

复制代码

minify
使用minify会对生成的html文件进行压缩。默认是false。html-webpack-plugin内部集成了

html-minifier

复制代码

,因此，还可以对minify进行配置：（注意，虽然minify支持BooleanObject,但是不能直接这样写：minify: true , 这样会报错

ERROR in TypeError: Cannot use 'in' operator to search for 'html5' in true

复制代码

, 使用时候必须给定一个

{ }

复制代码

对象）

...

复制代码

plugins: [

复制代码

new HtmlWebpackPlugin({

复制代码

...

复制代码

minify: {

复制代码

removeAttributeQuotes: true // 移除属性的引号

复制代码

}

复制代码

})

复制代码

]

复制代码

cache
默认是true的，表示内容变化的时候生成一个新的文件。
showErrors
当webpack报错的时候，会把错误信息包裹再一个

pre

复制代码

中，默认是true。
chunks
chunks主要用于多入口文件，当你有多个入口文件，那就回编译后生成多个打包后的文件，那么

chunks

复制代码

就能选择你要使用那些js文件

entry: {

复制代码

index: path.resolve(__dirname, './src/index.js'),

复制代码

devor: path.resolve(__dirname, './src/devor.js'),

复制代码

main: path.resolve(__dirname, './src/main.js')

复制代码

}

复制代码

[/code][code]plugins: [

复制代码

new httpWebpackPlugin({

复制代码

chunks: ['index','main']

复制代码

})

复制代码

]

复制代码

那么编译后：

[/code][code]

复制代码

如果你没有设置chunks选项，那么默认是全部显示

excludeChunks
排除掉一些js

excludeChunks: ['devor.js']// 等价于上面的

复制代码

xhtml
一个布尔值，默认值是 false ，如果为 true ,则以兼容 xhtml 的模式引用文件。
chunksSortMode
script的顺序，默认四个选项：

none

复制代码

auto

复制代码

dependency

复制代码

{function}

复制代码

'dependency' 不用说，按照不同文件的依赖关系来排序。
'auto' 默认值，插件的内置的排序方式，具体顺序....
'none' 无序？
{function} 提供一个函数？

插件 html-webpack-plugin 的详解

浏览过的版块