如果默认生成的 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. python编程系列---global的使用注意点

    global用法虽然很简单,当在函数中要修改全局变量时要使用到,但也要注意一个小问题,看下面的代码: 调用append()方法,只是修改,并不是赋值操作,不需要global提前声明 temp_num ...

  2. 简单认识JVM

    准备: 在具体聊JVM之前,我们先看两张图,通过分析图,咱们慢慢来聊聊JVM. JVM内存结构图 JVM内存结构脑图 上面两张图中,第二张图相对来说比较直观,就是JVM内存结构都划分成了哪些模块,各个 ...

  3. Android SDK安装与环境变量的配置(windows系统)

    (一)下载Android SDK压缩包 解压后即可(全英文路径,以免后续出现乱码) (1)下载地址:http://tools.android-studio.org/index.php/sdk

  4. The usage of Markdown---杂谈：缩进/换行/分割线/注释/文字颜色

    目录 1. 序言 2. 缩进 3. 换行 4. 分割线 5. 注释 6. 改变文字大小和颜色 更新时间:2019.09.14 1. 序言   今天一口气更新了接近10篇博客(虽然只是将我之前基本码好的 ...

  5. spring boot mybatis多多数据源解决方法

    在我们的项目中不免会遇到需要在一个项目中使用多个数据源的问题,像我在得到一个任务将用户的聊天记录进行迁移的时候,就是用到了三个数据源,当时使用的AOP的编程方式根据访问的方法的不同进行动态的切换数据源 ...

  6. [最新方法]终于解决了 Ubuntu 14.04 网络图标不见了 的问题|Ubuntu14.04 网络图标消失

    解决 Ubuntu 14.04 网络图标不见了 消失的问题   这个问题困扰了我大半年了.但是我就硬是不想重新装系统.搜索研究一番发现,这个问题是nm-applet的问题.   然后偶然发现nm-ap ...

  7. fenby C语言P24

    #include <stdio.h> int main(){ char cArr[]={'I','L','O','V','E','C'}; char sArr[]="ilovec ...

  8. Linux后台运行Jar方法

    原文地址:http://blog.csdn.net/c1481118216 https://blog.csdn.net/c1481118216/article/details/53010963 在li ...

  9. 一个开源组件 bug 引发的分析

    这是一个悲伤的故事.某日清晨,距离版本转测还剩一天,切图仔的我正按照计划有条不紊的画页面.当我点击一个下拉弹框组件中分页组件页数过多而出现的向后 5 页省略号时,悲剧开始了,弹框被收回了.情景再现 问 ...

  10. 暑期集训20190725 胜地不常(paradise)

    [题目描述] 给定两个长度为n的非负整数数组a,b, [输入数据] 第一行一个整数n. 第二行n个整数a1~an. 第三行n个整数b1~bn. [输出数据] 一行一个整数表示答案. [样例输入] 4 ...