如果默认生成的 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. 史上最轻松入门之Spring Batch - 轻量级批处理框架实践

    从 MariaDB 一张表内读 10 万条记录,经处理后写到 MongoDB . Batch 任务模型 具体实现 1.新建 Spring Boot 应用,依赖如下: <!-- Web 应用 -- ...

  2. 整理了适合新手的20个Python练手小程序

    100个Python练手小程序,学习python的很好的资料,覆盖了python中的每一部分,可以边学习边练习,更容易掌握python. 本文附带基础视频教程:私信回复[基础]就可以获取的 [程序1] ...

  3. Kafka消费者 从Kafka中读取数据并写入文件

    Kafka消费者 从Kafka中读取数据 最近有需求要从kafak上消费读取实时数据,并将数据中的key输出到文件中,用于发布端的原始点进行比对,以此来确定是否传输过程中有遗漏数据. 不废话,直接上代 ...

  4. 实验：用tcp请求http协议的接口

    图示: 开启http服务,浏览器地址,访问测试页面 查看http报文,复制出来 用tcp工具请求测试 http 协议就是这样的,在tcp协议上面做了报文格式处理,连接发送数据后,就自动断开连接 jav ...

  5. unity 动画 音频播放

    采用Unity进行音频动画的播放时最常用的技术,在此进行一下简单讲解与应用. (一)动画播放(本文采用animation进行验证,关于animation和animator区别可问度娘,在此不做赘述) ...

  6. 这一次，终于系统的学习了 JVM 内存结构

    最近在看< JAVA并发编程实践 >这本书,里面涉及到了 Java 内存模型,通过 Java 内存模型顺理成章的来到的 JVM 内存结构,关于 JVM 内存结构的认知还停留在上大学那会的课 ...

  7. Windows许可证即将过期怎么办？

    最近在使用电脑的时候,一开机就会弹窗出现:Windows 许可证即将过期.我勒个去,windows还会过期啊. 我搜遍全网,发现了一个很棒的 Windows10 永久激活的工具,而且没有广告什么乱七八 ...

  8. python小练习--模拟用户登录，（3次重试机会，登录成功展示登录账号密码）

    知识点使用:1.格式化输出的两种方法---% .formate 2.while循环的使用,及跳出循环的两种方法---break(跳出循环体).continue(结束本次循环,继续下次循环) 3.if条 ...

  9. NodeJs 实现 WebSocket 即时通讯（版本一）

    服务端代码 var ws = require("nodejs-websocket"); console.log("开始建立连接...") var game1 = ...

  10. Vue---mock.js 使用

    mockjs 概述 在我们的生产实际中,后端的接口往往是较晚才会出来,并且还要写接口文档,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于是有没有可以制造假数 ...