如果我们需要在html-webpack-plugin插件中传参数,在模板中根目录下的index.html模板中引用怎么办?
我们可以在webpack.config.js文件中写入这么一行代码:title:'webpack is good'
webpack.config.js代码如下:
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:{
//打包入口文件
main:'./src/script/main.js',
a:'./src/script/a.js'
},
output:{
path:__dirname + '/dist', //打包后的文件路径
filename:'js/[name]-[chunkhash].js' //打包后的文件名
},
plugins:[
new htmlWebpackPlugin({
//注意传的参数是一个对象
filename:'index-[hash].html', //打包好的html名称
template:'index.html', //传一个模板,就是根目录下的index.html
inject:'head', // script标签的插入位置
title:'webpack is good' //这个是传递的参数
})
]
}
然后我们通过模板获取到参数,那我们应该怎么做呢?
修改根目录下index.html代码如下:
添加代码:(用来接收参数:)<title><%=htmlWebpackPlugin.options.title %></title>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<!-- 接收参数 -->
<title><%=htmlWebpackPlugin.options.title %></title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
接收参数就用这行代码来实现:<%=htmlWebpackPlugin.options.title %>