详解html-webpack-plugin插件(用法总结)

html-webpack-plugin 插件是用于编译 Webpack 项目中的 html 类型的文件,如果直接将 html 文件置于 ./src 目录中,用 Webpack 打包时是不会编译到生产环境中的。因为 Webpack 编译任何文件都需要基于配置文件先行配置的。

Webpack 插件使用三步曲:安装>引入>配置

npm 安装

npm install --save-dev html-webpack-plugin

yarn 安装

yarn add html-webpack-plugin --dev

html-webpack-plugin 入口未定义时

//webpack.config.js

const path = require('path');

const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

entry: {

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

},

output: {

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

filename: '[name].js'

},

plugins: [

new htmlWebpackPlugin()

]

}

输出的 html 文件为:dist/index.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Webpack App</title>

</head>

<body>

<script type="text/javascript" src="home.js"></script></body>

</html>

此 webpack.config.js 配置文件,是最简用法 html-webpack-plugin 甚至未传递任何参数,但它基于这个原则 Entrypoint undefined = index.html 当未定义此插件的入口时,默认为 index.html,输出同样是 index.html。

所以未定义入口时,不论 ./src 下有任何名称的 html 文件都不会被打包处理,但是会默认输出 index.html 文件。

html-webpack-plugin 中任何自定义参数设置都会覆盖默认值

简单定义一个入口(在参数对象的 template 字段中设置)看看效果:

./src/index.html 中有这个文件

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

</head>

<body>

<div id="test">html webpack plugin</div>

</body>

</html>

webpack.config.js 增加 template 字段

const path = require('path');

const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

entry: {

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

},

output: {

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

filename: '[name].js'

},

plugins: [

new htmlWebpackPlugin({

template: './src/index.html'//只增加了这行

})

]

}

打包结果是 dist/home.js 和 dist/index.html 其中 html 文件内容如下,和之前src文件中创建的完全一样,证明自定义入口生效,且覆盖了默认入口

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

</head>

<body>

<div id="test">html webpack plugin</div>

</body>

</html>

template: './src/index2.html' 这里,template 的值就是 html 文件的入口,相当于js文件的 entry 字段的作用,只设置 template时,默认输出为 index.html, 输出文件名通过 `filename` 字段设置

template指定你生成的文件所依赖哪一个html文件模板,模板类型可以是html、jade、ejs等。但是要注意的是,如果想使用自定义的模板文件的时候,你需要安装对应的loader。

当配置了 html 文件的出口 filename 时

const path = require('path');

const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

entry: {

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

},

output: {

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

filename: '[name].js'

},

plugins: [

new htmlWebpackPlugin({

template: './src/index2.html',

filename: 'index.output.html'

})

]

}

输出为 dist/home.js 和 dist/index.output.html

同 webpack.config.js 配置文件的 output 属性的 filename 字段一样,htmlWebpackPlugin({})的filname 字段也可以在其值加文件夹实现分类

const path = require('path');

const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

entry: {

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

},

output: {

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

filename: '[name].js'

},

plugins: [

new htmlWebpackPlugin({

template: './src/index2.html',

filename: './category/index.output.html'

})

]

}

输出为 dist/home.js 和 dist/category/index.output.html

title 字段,只有未定义 template 模板文件的时候生效,即只在使用默认输出文件index.html 的时候,title 设置才有用,否则它的值,会被你指定的 template 文件的title所覆盖,title 默认值为 Webpack App

favicon

'./somepath/favicon.ico',它的值是你的 favicon.ico 图标的路径

inject的四个值: true body head false 指定在何处(body or head)引入 script 文件

  • true 默认值,script标签位于html文件的 body 底部
  • body script标签位于html文件的 body 底部
  • head script标签位于html文件的 head中
  • false 不插入生成的js文件,这个几乎不会用到的

其中 body 和 head 为字符串类型需要加引号,false和true为 Boolean 类型值

minify 的值是一个对象,设置压缩属性

plugins: [

new HtmlWebpackPlugin({

...

minify: {

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

}

})

]

  • hash:布尔值,用于清除缓存
  • cache: 布尔值, 指定文件要不要缓存
  • showErrors:布尔值,将错误信息写入HTML页面
  • meta: {} 值是对象,设置元信息

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

xhtml

一个布尔值,默认值是 false ,如果为 true ,则以兼容 xhtml 的模式引用文件。

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')

}

plugins: [

new httpWebpackPlugin({

chunks: ['index','main']

})

]

那么编译后:

<script type=text/javascript src="index.js"></script>

<script type=text/javascript src="main.js"></script>

如果你没有设置 chunks 选项,那么默认html 文件会引入所有的 entry 里面的js文件

excludeChunks 和 Chunks作用是一样的,值也都是数组形式,对多入口js进行选择

排除掉一些js

excludeChunks: ['devor.js']

// 等价于上面的

xhtml

一个布尔值,默认值是 false ,如果为 true ,则以兼容 xhtml 的模式引用文件。

以上是 详解html-webpack-plugin插件(用法总结) 的全部内容, 来源链接: utcz.com/z/353056.html

回到顶部