如果默认生成的 HTML 文件不适合需求，可以创建/使用自定义模板。

一是通过 inject 选项，然后传递给定制的 HTML 文件。html-webpack-plugin 将会自动注入所有需要的 CSS, js, manifest 和 favicon 文件到标记中。

plugins: [

  new HtmlWebpackPlugin({

    title: 'Custom template',

    template: 'myIndex.html', // Load a custom template

    inject: 'body' // Inject all scripts into the body

  })

]

自定义的myIndex.html

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

    <title><%= htmlWebpackPlugin.options.title %></title>

  </head>

  <body>

  </body>

</html>

参考：http://www.cnblogs.com/haogj/p/5160821.html

另一个是配置html-webpack-plugin

使之直接为项目生成一个或多个HTML文件（HTML文件个数由插件实例的个数决定），
并将webpack打包后输出的所有脚本文件自动添加到插件生成的HTML文件中。
 
以下例子将通过配置，可以将根目录下用户自定义的HTML文件作为插件生成HTML文件的模板。另外，还可以通过向插件传递参数，控制HTML文件的输出。
1.在项目根目录下安装插件
cnpm install html-webpack-plugin --save-dev

2.在webpack配置文件头部require html-webpack-plugin模块，并保存引用至htmlWebpackPlugin[变量]。

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

3.为webpack配置文件暴露的对象添加一个plugins属性，属性值为一个数组，将新建的html-webpack-plugin对象实例添加到数组中。若不传入任何参数，那么插件将生成默认的html文件。

module.exports = {

 entry: {

     main:'./src/script/main.js'

 },

 output: {

     path: './dist',

     filename: 'js/[name].bundle.js'

 },

 plugins:[

     new htmlWebpackPlugin()

     ]

}

4.配置参数。为新建的对象实例传入一个对象字面量参数，初始化对象实例的属性

plugins: [

    new webpack.DefinePlugin({

      'process.env': require('../config/dev.env')

    }),

    new webpack.HotModuleReplacementPlugin(),

    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.

    new webpack.NoEmitOnErrorsPlugin(),

    // https://github.com/ampedandwired/html-webpack-plugin

    new HtmlWebpackPlugin({

      filename: 'index.html',

      template: 'index.html',

      inject: true,

      favicon: resolve('favicon.ico'),

      title: 'vue-element-admin',

      path: config.dev.assetsPublicPath + config.dev.assetsSubDirectory

    }),

  ]

5.在HTML中使用

  <body>

    <script src=<%= htmlWebpackPlugin.options.path %>/tinymce4.7.5/tinymce.min.js></script>

    <div id="app"></div>

    <!-- built files will be auto injected -->

  </body>

参考：

https://www.jianshu.com/p/89414e89c563

vue中自定义html文件的模板的更多相关文章

  1. vue中自定义组件（插件）

    vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...

  2. vue中自定义指令

    //vue中自定义指令 //使用 Vue.directive(id, [definition]) 定义全局的指令 //参数1:指令的名称.注意,在定义的时候,指令的名称前面,不需要加 v-前缀; 但是 ...

  3. 读取web工程中.properties资源文件的模板代码

    读取web工程中.properties资源文件的模板代码 // 读取web工程中.properties资源文件的模板代码 private void test2() throws IOException ...

  4. vue中的单文件组件

    之前都是在html文件中写组件的css,组件的js,组件的模板来演示vue组件的语法,下面介绍以.vue结尾的单文件组件.vue-loader是一个Webpack的loader,可以将单文件组件转换为 ...

  5. vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令

    目录 1,前言 2,.env文件的作用 3,配置.env文件 4,配置启动命令 5,获取.env中的全局变量 5,实际用处 1,前言 分享一下vue项目中利用.env文件存储全局环境变量,以及利于项目 ...

  6. CI框架中自定义view文件夹位置

    要想自定义view文件夹的位置,首先要了解CI框架时如何加载view文件夹的. CI中默认调用view的方法是: $this->load->view(); //这一行代码的原理是什么呢?请 ...

  7. vue中创建js文件使用export抛出函数，import引入后不能绑定HTML的问题

    在es6中使用export和import实现模块化: js文件: export function test(x) { console.log(x); } vue组件: import {test} fr ...

  8. vue中自定义指令vue.direvtive，自定义过滤器vue.filter(),vue过渡transition

    自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...

  9. vue中引入字体文件

    在用vue来写一官网的时候,想引入外部字体文件,毕竟总感觉他自己的字体有点难看,在这里记录下 1.先下载字体文件所需的.ttf文件 我这里想引入的是华文行楷字体 百度后下载了一个3M多的ttf文件 2 ...

随机推荐

  1. Redis事务深入解析和使用

    作为关系型数据库中一项非常重要的基础功能--事务,在 Redis 中是如何处理并使用的? 1.前言 事务指的是提供一种将多个命令打包,一次性按顺序地执行的机制,并且保证服务器只有在执行完事务中的所有命 ...

  2. CentOS6-Linux内核编译 详细步骤

    CentOS6-Linux内核编译 详细步骤 背景 Win10用VMwareWorkstation搭的虚拟机 CentOS6.5,内核版本2.6.32-431.el6.x86_64 在该环境下升级至4 ...

  3. Qt乱码的问题

    1.在启动应用程序前加入以下代码: //配置字符编码环境,让应用程序支持中文. QTextCodec *codec = QTextCodec::codecForName("System&qu ...

  4. 【原】iOS开发进阶(唐巧)读书笔记(二)

    第三部分:iOS开发底层原理 1.Objective-C对象模型 1.1 isa指针 NSObject.h部分代码: NS_ROOT_CLASS @interface NSObject <NSO ...

  5. Kafka常用操作备忘

    启动nohup ./bin/zookeeper-server-start.sh config/zookeeper.properties &nohup ./bin/kafka-server-st ...

  6. Java IO_001.File类--文件或文件夹相关操作

    Java IO之File对象常用操作 File类:用于文件或文件夹或网址相关联的操作.可以关联或不关联文件(即关联不存在的文件).构造函数有: public File(String pathname) ...

  7. Java基础（九）反射（reflection）

    1.反射库(reflection library)提供了一个非常丰富且精心设计的工具集,以便编写能够动态操纵Java代码的程序. 能够分析类能力的程序称为反射(reflection).反射机制的功能极 ...

  8. NetworkManager网络通讯_NetworkManager（二）

    本文主要来实现一下自定UI(实现HUD的功能),并对Network Manger进行深入的讲解. 1)自定义manager 创建脚本CustomerUnetManger,并继承自NetworkMang ...

  9. 条件渲染vue

    v-if:只渲染一次的情况下,性能更好v-show:频繁切换性能更好 vue虚拟DOM技术 浏览器:渲染引擎(慢)+JS引擎(快) 用1个JS对象来充当DOM对象,因为JS对象性能比较快,所以用虚拟D ...

  10. 开根号 HYSBZ - 3211

    区间修改+区间查询(线段树板子题) 另外因为1e9内的数开5次根号必定为1或0,所以我们可以提前打表i<=sqrt[1e9], s[i]=sqrt(i).这样每次改值不必再调用系统的sqrt: ...