原文地址: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处理,就不行了. 所以, 还得看看文档啊!!!

html-webpack-plugin 中使用 title选项设置模版中的值无效的更多相关文章

  1. head中的title显示在body中

    今天遇到一个问题,就是title中的内容会显示在body中 <head> <title>324234</title> </head> 网上搜了一下是说编 ...

  2. HTML中select的option设置selected=&quot;selected&quot;无效的解决方式

    今天遇到了一个奇葩问题,写HTML时有个select控件.通过设置option的selected="selected"竟然无效,可是在其它浏览器是能够的.问了一下Google大神, ...

  3. DataGridView中的ComboboxCell报了System.ArgumentException:DagaGridViewComboBoxCell值无效错误

    原因是初始化的时候给ComboboxCell绑定了一系列的值,但是真正赋值的时候却给了一个不在那一系列值范围中的值,所以就报了这个错 在开发的时候难免会因为数据的问题出现这个问题,为了不让系统崩掉,就 ...

  4. 8. Smarty3:模版中的内置函数

    smarty3中对内置函数的修改比較大,加入了很多新的功能:变量声明.表达式,流程控制,函数.数组等.可是建议不要在模版中去使用过于复杂的逻辑,而是要尽量将一些程序设计逻辑写到PHP中,并在模版中採用 ...

  5. vue中父组件如何监听子组件值的变化

    vue中我们会遇到很多父子组件通信的需求, 下面简单列一下,父子组件通信的几种情况 1:父组件向子组件传值:使用prop向子组件传值: 2:子组件实时监听父组件传来的值的变化:使用watch去监听父组 ...

  6. windows7下系统保护中出现错误“文件名、目录名或卷标语法不正确。（0x8007007B）“ 以及保护设置列表中出现“Windows7_os(c:)(找不到)”选项时的解决方法

    windows7下系统保护功能很是鸡肋,有事会出现一下两个问题: 1.出现错误“文件名.目录名或卷标语法不正确.(0x8007007B) 2.保护设置列表中出现“Windows7_os(c:)(找不到 ...

  7. IDM中的选项设置你了解多少？

    IDM(Internet Download Manager)下载器能够兼容支持多种浏览器进行文件下载,很多时候只要复制一个地址IDM的下载弹窗就自动弹出来,有时候不需要下载的时候也会弹,时间久了就会感 ...

  8. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  9. 仿酷狗音乐播放器开发日志二十四 选项设置窗体的实现（附328行xml布局源码）

    转载请说明原出处,谢谢~~ 花了两天时间把仿酷狗的选项设置窗体做出来了,当然了只是做了外观.现在开学了,写代码的时间减少,所以整个仿酷狗的工程开发速度减慢了.今天把仿酷狗的选项设置窗体的布局代码分享出 ...

随机推荐

  1. 2016.6.20 在Eclipse配置Tomcat服务器的步骤

    好久没接触,又忘记了如何在eclipse中配置tomcat. (1)打开eclispe的preference (2)找到Server下方的Runtime Environment,单击右方的Add按钮. ...

  2. 内网ip打洞-----p2p实现原理

    网上找了非常多.代码大堆,原理讲清楚透彻的不多. 本人找几篇讲得好的来整理一下. 一片技术文章,最基本的讲清楚原理.假设再有完整的能执行的源码也可,关键是要把核心部分代码分析清楚. (1)问题的由来: ...

  3. Java实现链表结构的具体代码

    一.数据准备 1. 定义节点 2.   定义链表 1.数据部分 2.节点部分 class DATA //数据节点类型 { String key; String name; int age; } cla ...

  4. struts2类型转换+校验

    1.action中validate()与validateXxx() 用于action执行前的校验,如果校验失败,跳到input视图, 前者校验整个Action: 后者校验该Action中的Xxx方法. ...

  5. BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 第15章节--开发SP2013工作流应用程序

    BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第15章节--开发SP2013工作流应用程序         本章节你将学到: SP中工作流的新功能: 理解工作流管理服务 ...

  6. apue学习笔记（第十二章 线程控制）

    本章将讲解控制线程行为方面的详细内容,而前面的章节中使用的都是它们的默认行为 线程属性 pthread接口允许我们通过设置每个对象关联的不同属性来细调线程和同步对象的行为.管理这些属性的函数都遵循相同 ...

  7. （九）jQuery中的动画(载)

    原文链接:http://blog.csdn.net/zfy865628361/article/details/50358367 首先,用jQuery做动画效果要求在标准模式下,否则可能会引起动画抖动. ...

  8. 转：3.3V和5V电平双向转换——NMOS管

    分简单,仅由3个电阻加一个MOS管构成,电路图如下: 此电路来自于飞利浦的一篇设计指导文档,是I2C总线官方推荐使用的电平转换电路.在实际使用过程中,需要尤其注意NMOS管的选型以及上拉电阻阻值的选取 ...

  9. USB协议[转]__总结得很好

    一 枚举过程:◆ 用户将一个USB设备插入USB端口,主机为端口供电,设备此时处于上电状态.◆主机检测设备.◆集线器使用中断通道将事件报告给主机.◆主机发送Get_Port_Status(读端口状态) ...

  10. mybatis数据查询返回值

    查询: 返回值是整数. 小于0是查询的数据不存在,大于0是查询的数据已经存在.  修改: 返回值是整数. 大于0是修改的数据成功,否则就是失败. 添加: 和修改同理.