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.将模板引擎换成 ...
随机推荐
- C++中关于重载默认构造函数与默认全部参数的构造函数的使用注意
# include<iostream>using namespace std;class Time{public: //公用成员函数 ...
- 第3阶段——内核启动分析之prepare_namespace()如何挂载根文件系统和mtd分区介绍(6)
内核启动并初始化后,最终目的是像Windows一样能启动应用程序,在windows中每个应用程序都存在C盘.D盘等,而linux中每个应用程序是存放在根文件系统里面,那么挂载根文件系统在哪里,怎么实现 ...
- RadioButtonList控件如何取得选中的值
1.需求:我现在页面上有放两个单选控件,现在要通过判断不同的单选控件来对页面上的标签进行显示和隐藏操作 2.控件如下 <asp:RadioButtonList ID=" RepeatD ...
- 团队作业7---Alpha冲刺之事后诸葛亮
一.设想与目标 1.我们的软件要解决什么问题? 我们的软件主要是帮助老师解决通过博客地址收集博客的相关信息来对学生对课程的认真与努力程度进行评定的问题,主要就是根据采集到的各项博客数据作为评分项,构建 ...
- 团队作业4——第一次项目冲刺（Alpha版本）第一天 and 第二天
第一天冲刺 一.Daily Scrum Meeting照片 二.每个人的工作 1.今天计划完成的任务 徐璨 申悦:查找关于安卓开发资料,环境搭建 连永刚 林方言:设计项目所要实现的功能,并对功能进行详 ...
- 201521123025《JAVA程序设计》第6周学习总结
1. 本章学习总结 2. 书面作业 Q1.clone方法 1.1Object对象中的clone方法是被protected修饰,在自定义的类中覆盖clone方法时需要注意什么? 要克隆对象要覆盖clon ...
- 201521123009 《Java程序设计》第12周学习总结
1. 本周学习总结 2. 书面作业 Q1:将Student对象(属性:int id, String name,int age,double grade)写入文件student.data.从文件读出显示 ...
- 201521123016 《Java程序设计》第13周学习总结
1. 本周学习总结 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分析返回结果有何不同?为什么会有这样的不同? ping w ...
- 网络基础之IP地址与子网划分
IP地址 Ipv4地址格式:点分十进制 IP地址的分类 A类 B类 C类: D类:组播 E类: 公共IP地址 私有IP地址 特殊地址 保留地址 子网掩码 什么是子网掩码 CIDR表示法 子网划分 为啥 ...
- 为bookStore添加权限【动态代理和注解】
前言 目前为止,我们已经学习了动态代理技术和注解技术了.于是我们想要为之前的bookStore项目添加权限控制-.. 只有用户有权限的时候,后台管理才可以进行相对应的操作-.. 实现思路 之前我们做权 ...