webpack2使用ch9-处理模板文件 .html .ejs .tpl模板使用
1 目录展示 安装依赖
"ejs-loader": "^0.3.0",
"html-loader": "^0.4.5",
2 webpack.config.js配置
const webpack = require('webpack'),
htmlWebpackPlugin = require('html-webpack-plugin'),
path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'js/[name]-[chunkhash].js',
},
module: { //loader第三种使用方式 配置项设置 其他1引入 2cli
loaders: [
{ //解析.js
test: '/\.js$/', //正则匹配.js文件
loader: 'babel', //使用babel 要先安装 cnpm install --save-dev babel-loader babel-core
exclude: path.resolve(__dirname, 'node_modules'), //优化babel 排除
include: path.resolve(__dirname, 'src'),//优化babel 打包范围
query: {
presets: ['env'] //使用方式之1 cnpm install --save-dev babel-preset-env 告诉babel如何处理
}
},
{ //解析 .css
test: /\.css$/,
loader: 'style-loader!css-loader!postcss-loader' //style-loader!css-loader 解析使用
// css postcss-loader后端浏览器优化（加前缀）
//要先加载 postcss-loader写在后面
//?importLoaders=1 css import 'xxx.css'
},
{ //解析 .less
test: /\.less$/,
loader: 'style-loader!css-loader!postcss-loader!less-loader'
},{ //解析 .html
test: /\.html$/,
loader: 'html-loader'
},{ //解析 .tpl
test: /\.tpl$/,
loader: 'ejs-loader'
}
]
},
plugins: [
new htmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: 'body'
}),
new webpack.LoaderOptionsPlugin({ //浏览器加前缀
options: {
postcss: [require('autoprefixer')({browsers:['last 5 versions']})]
}
}),
]
};
3 app.js
import Layer from './components/layer/layer.js';
import './style/common.css'; const App = function () {
const dom = document.getElementById('app');
let layer = new Layer();
dom.innerHTML = layer.tpl({ //此时lay.tpl是一个函数，函数执行并传参
name: 'jeson',
arr: ['张三', '李四', '王五', '赵六']
});
} new App();
根目录 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title> </head>
<body id="app"> </body>
</html>
4 layer.js
import tpl from './layer.tpl';
import './layer.less'; function layer() {
return {
name: 'layer',
tpl: tpl
}
}; export default layer;
5 layer.tpl
<div>
<div>this is <%= name %></div>
<% for(let i=0;i<arr.length;i++){ %> <%= arr[i] %> <% } %>
</div>
6 打包
7 查看 .tpl模板是否被解析
ok
8 .ejs模板
8.1 webpack.config.js添加 .ejs loader
{ //解析 .ejs
test: /\.ejs$/,
loader: 'ejs-loader'
}
8.2 layer.js修改
import tpl from './layer.ejs';
import './layer.less'; function layer() {
return {
name: 'layer',
tpl: tpl
}
}; export default layer;
8.3 lay.ejs
<div>
ejs
<div>this is <%= name %></div>
<% for(let i=0;i<arr.length;i++){ %> <%= arr[i] %> <% } %>
</div>
8.4 打包
8.5 查看
9.html模板
9.1 webpack.config.js 添加 .html的 loader
{ //解析 .html
test: /\.html$/,
loader: 'html-loader'
}
9.2 layer.js修改
import tpl from './layer.html';
import './layer.less'; function layer() {
return {
name: 'layer',
tpl: tpl
}
}; export default layer;
9.3 layer.html
<div class="layer">
<div>this is es6 模板</div>
</div>
app.js
import Layer from './components/layer/layer.js';
import './style/common.css'; const App = function () {
const dom = document.getElementById('app');
let layer = new Layer();
dom.innerHTML = layer.tpl; //此时的layer.tpl不是一个函数
} new App();
9.4 打包
9.5 查看效果
webpack2使用ch9-处理模板文件 .html .ejs .tpl模板使用的更多相关文章
- YAML 模板文件语法
YAML 模板文件语法 默认的模板文件是 docker-compose.yml,其中定义的每个服务都必须通过 image 指令指定镜像或 build 指令(需要 Dockerfile)来自动构建. 其 ...
- discuz模板文件列表
template/default/common模板公共文件夹,全局相关 |--block_forumtree.htm 树形论坛版块分支js文件 |--block_thread.htm特 ...
- Csharp 简单操作Word模板文件
原文:Csharp 简单操作Word模板文件 1.创建一个模板的Word文档 Doc1.dot 内容为: To: <Name> Sub:<Subject> Website i ...
- ThinkPHP第七天(F函数使用，项目分组配置，项目分组模板文件放置规则配置)
1.F(文件名称,写入数据,写入地址),用于将数据写入至磁盘文件中,如F('Data',$arr,'./Data/'),作用是将$arr写入至网站根目录的Data文件夹中的Data.php中. 2.读 ...
- 织梦Dedecms主要文件夹目录及模板文件说明
虽然织梦DedeCMS因为安全问题被人所诟病,但瑕不掩瑜,无论从用户群数量还是时间等各方面,织梦DedeCMS都是国内排名前几的CMS建站程序.如果你想学习CMS的二次开发,织梦DedeCMS是必须需 ...
- 写一个迷你版Smarty模板引擎，对认识模板引擎原理非常好（附代码）
前些时间在看创智博客韩顺平的Smarty模板引擎教程,再结合自己跟李炎恢第二季开发中CMS系统写的tpl模板引擎.今天就写一个迷你版的Smarty引擎,虽然说我并没有深入分析过Smarty的源码,但是 ...
- Discuz3.3精仿小米风格整站模板制作——1、新建模板方案
术语说明: 模板——模板是一堆按照规定命名方式的html文件,用于指定整个论坛不同页面的外观. 标签——标签和模板共同作用以实现论坛换肤功能,其中标签主要控制页面显示什么数据,显示多少条等. 风格—— ...
- express搭建web服务器、路由、get、post请求、multer上传文件、EJS模板引擎的使用
express官网 postman工具下载地址 multer的npm文档地址 express模板引擎怎么使用 地址:http://www.expressjs.com.cn/guide/using- ...
- 将ejs模板文件的后缀换成html
1.app.js的头部定义ejs: var ejs = require('ejs'): 2注册html模板引擎: app.engine('html',ejs.__express); 3.将模板引擎换成 ...
随机推荐
- mkyaffs2image制作根文件系统、使用NFS挂载虚拟机目录（2）
1.制作根文件系统及nfs烧写 1.1 先解压文件系统,/wok/nfs_root 目录下是已经构造好的各种文件系统:① fs_mini.tar.bz2 是最小的根文件系统,里面的设备节点是事先建立好 ...
- C# 获取exe、dll中的图标，支持获取256x256分辨率
在网上找过许多文章,都没有成功获取过大图标,只能获取最大32x32.最后自己尝试了相关的windows api,终于找到一个可用的. 主要用到的C++的PrivateExtractIcons函数,具体 ...
- 从async await 报错Unexpected identifier 谈谈对上下文的理解
原文首发地址: 先简单介绍下async await: async/await是ES6推出的异步处理方案,目的也很明确:更好的实现异步编程. 详细见阮大神 ES6入门 现在说说实践中遇到的问题:使用 ...
- IntelliJ IDEA使用（一）基本设置与类、方法模板设置
其实之前一直开发都是在使用的是Eclipse,但是最近在做Maven项目的时候要用IntelliJ IDEA,据说这个idea功能非常的强大,最近在使用的时候发现如果适应的真的是非常的强大.感觉是比E ...
- grunt之connect、watch
先说下这两个插件配合的用处,简单的说,它们可以拯救你的F5.connect用于建立一个静态服务器,watch监听文件的修改并自动实时刷新浏览器的页面. 还是options走起. connect(V0. ...
- 201521123109《java程序设计》第八周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 选做:收集你认为有用的代码片段 2. 书面作业 本次作业题集集合 List中指定元素的删除(题目4-1 ...
- 201521123024 《Java程序设计》第6周学习总结
1. 本周学习总结 2. 书面作业 1.clone方法 1.1 Object对象中的clone方法是被protected修饰,在自定义的类中覆盖clone方法时需要注意什么? 用protected修饰 ...
- 201521123006 《Java程序设计》第5周学习总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 接口与抽象类拥有相同之处:(1)都代表系统的抽象层. (2)都不能被实例化(不能 ...
- 201521123065《java程序设计》第10周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 finally 题目4-2 1.1 截图你的提交结果(出现学 ...
- 多线程面试题系列（3）：原子操作 Interlocked系列函数
上一篇中讲到一个多线程报数功能.为了描述方便和代码简洁起见,我们可以只输出最后的报数结果来观察程序是否运行出错.这也非常类似于统计一个网站每天有多少用户登录,每个用户登录用一个线程模拟,线程运行时会将 ...