如果默认生成的 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. [洛谷P3613]睡觉困难综合症

    写码30min,调码3h的题.. 好在最后查出来了 , , n, x, y, z); 改成了 , , n, mark[x], y, z); 然后$40\rightarrow 100$ #include ...

  2. LaTeX常用篇(一)---公式输入

    目录 1. 序言 2. 命令介绍 3. 公式输入 3.1 无编号公式 3.2 有编号公式 更新时间:2019.10.02 1. 序言   当我们首次在文档中输入公式的时候,我们首先想到的是word,毕 ...

  3. Java_条件控制与循环控制

    条件控制语句: 1.     if-else语句 if(条件1){ 代码块1; }else if(条件2){ 代码块2; }else{ 代码块3; } 2.     switch语句 switch(变 ...

  4. The command ("dfs.browser.action.delete") is undefined 解决Hadoop Eclipse插件报错

    Hadoop Eclipse插件 报错. 使用 hadoop-eclipse-kepler-plugin-2.2.0.jar 如下所示 Error Log 强迫症看了 受不了 The command ...

  5. Spark集群安装与配置

    一.Scala安装 1.https://www.scala-lang.org/download/2.11.12.html下载并复制到/home/jun下解压 [jun@master ~]$ cd sc ...

  6. django-URL别名的作用（六）

    接include函数那一节. 作用:为url地址取一个名称,这样在html中引用的时候,无论后台url怎么变,都可以访问到对应的界面,可以减少更改的次数. 基本目录: book\urls.py fro ...

  7. python小例子（二）

    1.在函数里面修改全局变量的值 2.合并两个字典.删除字典中的值 3.python2和python3 range(1000)的区别 python2返回列表,python3返回迭代器 4.什么样的语言可 ...

  8. Spring IoC的概念

    Spring IoC的基础知识 Spring 框架可以说是Java世界中最成功的框架,它的成功来自于理念,而不是技术,它最核心的理念是IoC(控制反转)和AOP(面向切面编程),其中IoC是Sprin ...

  9. Just For Test

    Just For Test

  10. mysql 主从同步（转）

    教程开始:一.安装MySQL 说明:在两台MySQL服务器192.168.21.169和192.168.21.168上分别进行如下操作,安装MySQL 5.5.22  二.配置MySQL主服务器(19 ...