如果默认生成的 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. 04 Node.js学习笔记之模块的加载

    A文件代码: //1.require是一个方法,它的作用就是用来加载模块的 console.log("执行 B ") require('./b.js'); console.log( ...

  2. 微信小程序初级教程

    小程序代码构成 JSON 配置 WXML 模版 WXSS 样式 JS 逻辑交互 JSON 配置 在小程序中,JSON扮演的静态配置的角色. 小程序配置 app.json { "pages&q ...

  3. SQL挑战一 : 查找最晚入职员工的所有信息

    以上数据库表: CREATE TABLE `employees` ( `emp_no` int(11) NOT NULL, `birth_date` date NOT NULL, `first_nam ...

  4. springboot使用spring配置文件

    1.如何在springboot中使用spring的配置文件,使用@Configuration和@ImportResource注解 package com.spring.task; import org ...

  5. pyarango整理

    目录: 连接数据库 创建数据库/集合/文档 检索筛选 更新 删除 调用AQL的方法 安装需要用到的python包: pip install pyarango 一.连接数据库: >>> ...

  6. Linux 编译与交叉编译

    在Linux环境中,所处平台不同,执行文件也就不同,同一执行文件不能在不同平台下使用 如在Ubnutu下 是用gcc编译一个.c文件 gcc main.c -o main.out -o 可以指定输出文 ...

  7. js实现的几种继承方式

    他山之石,可以攻玉,本人一直以谦虚的态度学他人之所长,补自己之所短,望各位老师指正! 拜谢 js几种继承方式,学习中的总结: 所谓的继承是为了继承共有的属性,减少不必要代码的书写 第一种:借用构造函数 ...

  8. elasticsearch操作命令

    总结几个es的curl操作命令: 查询某条数据:curl -XGET http://elasticsearch:9200/company/company/123?pretty 查询索引下数据总量:cu ...

  9. 关于js中函数的一点总结

    1函数中this作用域 this根据当前环境来决定作用域,可以使用call和apply的方法来改变当前的this指向 <script> var name = "global&qu ...

  10. 「Usaco2012 Dec」第一（字典树+拓扑排序）

    (我恨字符串) 惯例化简题目:给定n个字符串,可以改变字符的相对大小(在字典序中的大小),问:字符串i是否能成为最小的字符串(字典序) 解题过程: 首先你可以预处理出来26的全排列然后暴力然后你只要用 ...