vue中自定义html文件的模板
2024-09-01 18:02:30
如果默认生成的 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
最新文章
- 用python来个百度关键词刷排名脚本
- .NET 清理非托管资源
- java内功 ---- jvm虚拟机原理总结,侧重于虚拟机类加载执行系统
- WinForm------DockManager控件的使用方法(里面包含DockPanel控件)
- Eclipse创建java webproject配置Tomacat和JDK
- # 关于string
- MySQL元数据库——information_schema
- vue-router跳转
- C语言memmove()函数: 复制内存内容(可以重叠的内存块)
- AI 蒙特卡罗算法
- [Oracle]构筑TDE 环境的例子
- php 的函数
- php开启xdebug扩展
- MySQL中int(M)和tinyint(M)数值类型中M值的意义
- Linux 破坏性修复
- Python + logging 输出到屏幕,将log日志写入文件
- NSDictionary 和NSArray 排序(sort)
- SQL语句中拆分字段
- Spring MVC属于SpringFrameWork的后续产品
- DOM节点常见的属性及操作