Open fxxqq opened 6 years ago
作用:生成html文件 原理:将 webpack中entry配置的相关入口thunk 和 extract-text-webpack-plugin抽取的css样式 插入到该插件提供的template或者templateContent配置项指定的内容基础上生成一个html文件,具体插入方式是将样式link插入到head元素中,script插入到head或者body中。
entry
extract-text-webpack-plugin
template
templateContent
link
head
script
body
实例化该插件时可以不配置任何参数,例如下面这样:
var HtmlWebpackPlugin = require('html-webpack-plugin') webpackconfig = { ... plugins: [ new HtmlWebpackPlugin() ] }
不配置任何选项的html-webpack-plugin插件,他会默认将webpack中的entry配置所有入口thunk和extract-text-webpack-plugin抽取的css样式都插入到文件指定的位置。例如上面生成的html文件内容如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Webpack App</title> <link href="index-af150e90583a89775c77.css" rel="stylesheet"></head> <body> <script type="text/javascript" src="common-26a14e7d42a7c7bbc4c2.js"></script> <script type="text/javascript" src="index-af150e90583a89775c77.js"></script></body> </html>
var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { devtool:'eval-source-map', devServer:{ inline:true, colors:true, port:8080, contentBase:__dirname + '/public' }, entry:{ index:__dirname + '/app/index.js', main:__dirname + '/app/main.js' }, output:{ path:__dirname + '/public', //通过HtmlWebpackPlugin插件生成的html文件存放在这个目录下面 filename:'/js/[name].js' //编译生成的js文件存放到根目录下面的js目录下面,如果js目录不存在则自动创建 }, plugins:[ new HtmlWebpackPlugin({ title:'自动生成自定义标题',//如果使用了模板,就使用模板里的title,这里的title设置会失效,哪怕模板里的title为空 template:__dirname + '/public/tempIndex.html',//需要编译的模板,可以是jade等第三方模板引擎也可以说纯html页面 filename:'demo.html',//最终生成的文件名,默认是index.html hash:true,//是否给所有包含的js、css文件后面添加hash值,可以用来清除缓存,但好像不是很管用 inject:true,// | 'head' | 'body' | false ,注入所有的资源到特定的 template 或者 templateContent 中,如果设置为 true 或者 body,所有的 javascript 资源将被放置到 body 元素的底部,'head' 将放置到 head 元素中。 chunks:['index'] //指定生成的文件demo.hmtl需要包括entry里的哪些入口文件(这里是index,main.js不会引入),不设置的话所以入口js文件都会被引入进来 }), new webpack.HotModuleReplacementPlugin() //热加载 ] }
作用:生成html文件 原理:将 webpack中
entry
配置的相关入口thunk 和extract-text-webpack-plugin
抽取的css样式 插入到该插件提供的template
或者templateContent
配置项指定的内容基础上生成一个html文件,具体插入方式是将样式link
插入到head
元素中,script
插入到head
或者body
中。实例化该插件时可以不配置任何参数,例如下面这样:
不配置任何选项的html-webpack-plugin插件,他会默认将webpack中的entry配置所有入口thunk和extract-text-webpack-plugin抽取的css样式都插入到文件指定的位置。例如上面生成的html文件内容如下:
html-webpack-plugin配置项