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模板使用的更多相关文章

  1. YAML 模板文件语法

    YAML 模板文件语法 默认的模板文件是 docker-compose.yml,其中定义的每个服务都必须通过 image 指令指定镜像或 build 指令(需要 Dockerfile)来自动构建. 其 ...

  2. discuz模板文件列表

    template/default/common模板公共文件夹,全局相关     |--block_forumtree.htm 树形论坛版块分支js文件     |--block_thread.htm特 ...

  3. Csharp 简单操作Word模板文件

    原文:Csharp 简单操作Word模板文件 1.创建一个模板的Word文档  Doc1.dot 内容为: To: <Name> Sub:<Subject> Website i ...

  4. ThinkPHP第七天(F函数使用，项目分组配置，项目分组模板文件放置规则配置)

    1.F(文件名称,写入数据,写入地址),用于将数据写入至磁盘文件中,如F('Data',$arr,'./Data/'),作用是将$arr写入至网站根目录的Data文件夹中的Data.php中. 2.读 ...

  5. 织梦Dedecms主要文件夹目录及模板文件说明

    虽然织梦DedeCMS因为安全问题被人所诟病,但瑕不掩瑜,无论从用户群数量还是时间等各方面,织梦DedeCMS都是国内排名前几的CMS建站程序.如果你想学习CMS的二次开发,织梦DedeCMS是必须需 ...

  6. 写一个迷你版Smarty模板引擎，对认识模板引擎原理非常好（附代码）

    前些时间在看创智博客韩顺平的Smarty模板引擎教程,再结合自己跟李炎恢第二季开发中CMS系统写的tpl模板引擎.今天就写一个迷你版的Smarty引擎,虽然说我并没有深入分析过Smarty的源码,但是 ...

  7. Discuz3.3精仿小米风格整站模板制作——1、新建模板方案

    术语说明: 模板——模板是一堆按照规定命名方式的html文件,用于指定整个论坛不同页面的外观. 标签——标签和模板共同作用以实现论坛换肤功能,其中标签主要控制页面显示什么数据,显示多少条等. 风格—— ...

  8. express搭建web服务器、路由、get、post请求、multer上传文件、EJS模板引擎的使用

    express官网 postman工具下载地址  multer的npm文档地址 express模板引擎怎么使用  地址:http://www.expressjs.com.cn/guide/using- ...

  9. 将ejs模板文件的后缀换成html

    1.app.js的头部定义ejs: var ejs = require('ejs'): 2注册html模板引擎: app.engine('html',ejs.__express); 3.将模板引擎换成 ...

随机推荐

  1. Linux下的I/O模型以及各自的优缺点

    其实关于这方面的知识,我阅读的是<UNIX网络编程:卷一>,书里是以UNIX为中心展开描述的,根据这部分知识,在网上参考了部分资料.以Linux为中心整理了这篇博客. Linux的I/O模 ...

  2. 【C++小白成长撸】--（续）单偶数N阶魔方矩阵

    1 /*程序的版权和版本声明部分: **Copyright(c) 2016,电子科技大学本科生 **All rights reserved. **文件名:单偶数N阶魔方矩阵 **程序作用:单偶数N阶魔 ...

  3. three.js 文字显示不出来

    试了下使用three.js加载文字,首先是报了一个这样的错误: Cross origin requests are only supported for HTTP.” 当时很懵逼,去网上查了查,发现是 ...

  4. 大家一起来找茬（BUG）

    大家一起来找茬(BUG) ----------目录---------- 一.上手体验 1.主界面 2.功能 二.程序的 BUG 三.必应词典的 BUG 1."每日一句"里的句子不能 ...

  5. 201521123081《Java程序设计》 第3周学习总结

    1. 本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识组织起来.请使用纸笔或者下面的工具画出本周学习到的知识点.截图或者拍照上传. 参考资料:百 ...

  6. 201521123050《Java程序设计》第3周学习总结

    1. 本周学习总结 2. 书面作业 1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; p ...

  7. Java课程设计博客（个人）

    Java课程设计博客(个人) 1. 团队课程设计博客链接 http://www.cnblogs.com/wkfg/p/7063081.html 2. 个人负责模块或任务说明 负责模块/任务:编写doG ...

  8. Java第十三周总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...

  9. 201521123110《Java程序设计》第11周学习总结

    1. 本周学习总结 2. 书面作业 1.互斥访问与同步访问 1.1 除了使用synchronized修饰方法实现互斥同步访问,还有什么办法实现互斥同步访问(请出现相关代码)? 1.2 同步代码块与同步 ...

  10. 201521123074 《Java程序设计》第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 Q1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自 ...