webpack html自动引入,手撕webpack：HtmlWebpackPlugin 插件使用

介绍

HtmlWebpackPlugin 简化了HTML文件的创建，它可以帮我们自动生成一个 HTML 文件，并自动引入每次编译后的 webpack bundle 文件。如果你不想使用插件生成的 HTML文件， 也可以使用lodash模板提供你自己的模板。关于 lodash 模板的介绍请参考：https://lodash.com/docs#template

安装npm i --save-dev html-webpack-pluginyarn add --dev html-webpack-plugin

基本使用

下面的配置将为你生成一个 HTML5 文件， 打包后的 bundle 文件将插入到 script 标签：var HtmlWebpackPlugin = require('html-webpack-plugin');

var path = require('path');

var webpackConfig = {

entry: 'index.js',

output: {

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

filename: 'index_bundle.js'

},

plugins: [

new HtmlWebpackPlugin()

]

};

编译后自动生成的 HTML 文件如下：html>

极限编程网

如果你有多个 webpack 入口点， 他们都会在生成的HTML文件中的 script 标签内。

常用选项

插件支持很多配置选项，通过这些选项你可以控制 HTML 内容的输出。

title

title 可以控制HTML 文档中 title 标签的内容，它是一个 string 类型的字符串，默认值是 "Webpack App" 。

filename

filename 配置自动生成的 HTML 文件的文件名称，它是一个 string 类型的字符串，默认值是 "index.html" 。

template

template 配置 HTML 文件模板的绝对路径，通过该配置我们可以指定自己的 HTML 模板。 在不指定模板解析器的时候，插件会使用 lodash 的 template 做为默认解析器，这也意味着可以在模板文件内使用 lodash 的语法，如。

templateParameters

允许覆盖模板中使用的参数，值可以是 Boolean、Object、Function。

inject

inject 规定打包后的资源文件放到 HTML 中的哪个位置。当传递true或'body'时，所有javascript资源将被放置在body元素的底部，'head'将把脚本放在head元素中。

favicon

将给定的favicon路径添加到输出HTML，它是一个 string 类型的字符串。

meta

允许向 HTML 注入 meta 标签，它是一个 object 对象。

hash

如果为 true，则向所有包含的脚本和CSS文件追加一个惟一的webpack编译散列，它是一个 Boolean 类型。

除了官方文档中提供的这些选项外，我们也可以增加自己的选项，使用案例请参考笔者的 《webpack 打包增加版本信息》 一文。

选项示例

webpack config 配置：const path = require("path")

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

module.exports = {

entry: {

main: './src/index.js'

},

output: {

filename: 'index.js',

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

},

plugins: [

new HtmlWebpackPlugin({

title: '极限编程网',

filename: 'home.html',

inject: "body",

template: "./home.html",

hash: true,

meta: {

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

}

})

]

}

home.html 内容：html>

项目结构：

打包编译后的 HTML 文件内容：html>

极限编程网