您的位置：首页 > Web前端 > HTML

html-webpack-plugin 中使用 title选项设置模版中的值无效

2017-04-23 10:55 776 查看
原文地址:https://segmentfault.com/q/1010000004555431

webpack.config.js配置:

var webpack = require("webpack");
var vue = require("vue-loader");

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');

var publicPath = "/public/assets/";

var plugins = [
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
new HtmlWebpackPlugin({
title: '111',
template: './resources/assets/template/index.html', // Load a custom template
inject: true // Inject all scripts into the body
}),
new HtmlWebpackPlugin({
title: '222',
filename: '../../resources/views/user.html',
template: './resources/assets/template/index.html',
inject: true,
hash: true,
cache: true
// chunks: ['vendors']
})
];

var config = {
entry: {
user:['./resources/assets/user-main.coffee'],
vendors: ['vue','jquery','vuex','vue-router']
},
output: {
path: __dirname + publicPath,
filename: '[name].js',
publicPath: publicPath,
},
module: {
loaders: [
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　test:/\.html$/,
　　　　　　　　　　　　　　　//include:[path.resolve(__dirname,"src")],
　　　　　　　　　　　　　　　loader:"html-loader"
　　　　　　　　　　　　}
]
},
plugins: plugins
};

module.exports = config;


模板index.html

<!DOCTYPE html>
<html>
<head>
<title> <%= htmlWebpackPlugin.options.title %> </title>
</head>
<body>

</body>
</html>


　

生成index.html

  <!DOCTYPE html>
<html>
<head>
<title> <%= htmlWebpackPlugin.options.title %> </title>
</head>
<body>

</body>
</html>


　

项目目录:



猜测原因:

因为配置文件中用到了html-loader, 是的模板index.html中的配置被当做字符串处理. 而使用html-loader多用来处理 component页面. 所以这里指定html-loader的处理范围(使用include配置或exclude[https://webpack.js.org/configuration/module/#rule-exclude]配置). 例如只处理src下的html. 可配置为include:[path.resolve(__dirname,"src/")](参见上面被注释的部分), 问题可解决.

题外话:

这种解决方式毕竟只能暂时解决这种简单的应用场景, 如果有页面同时需要html-loader和html-webpack-plugin处理,就不行了. 所以, 还得看看文档啊!!!
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航