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. MySQL的JOIN（二）：JOIN原理

    表连接算法 Nested Loop Join(NLJ)算法: 首先介绍一种基础算法:NLJ,嵌套循环算法.循环外层是驱动表,循坏内层是被驱动表.驱动表会驱动被驱动表进行连接操作.首先驱动表找到第一条记 ...

  2. 启动springjar

    java -jar cms-exporter-0.0.1-SNAPSHOT.jar --spring.config.location=classpath:./config

  3. [转载]C header files matching your running 

    原文地址:C header files matching your running kernel were not found.作者:[Opser]小默 c header files matching ...

  4. 交换机的Ethernet Channel

    端口聚合也叫做以太通道(ethernet channel),主要用于交换机之间连接.由于两个交换机之间有多条冗余链路的时候,STP会将其中的几条链路关闭,只保留一条,这样可以避免二层的环 路产生.但是 ...

  5. 【Alpha】第五次Daily Scrum Meeting

    GIT 一.今日站立式会议照片 二.会议内容 今天对昨天会议上产生的分歧进行了意见统一,每个人都阐述了自己的见解与看法,对,大家确实希望要做出挑礼物这样一个小程序就要尽力做到最好,但也对一些功能的实现 ...

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

    1. 本章学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 2. 书面作业 Q1.clone方法 1.1 Object ...

  7. 201521123069 《Java程序设计》 第2周学习总结

    1. 本章学习总结 (1)String类.StringBuilder类(频繁进行字符串的修改应选用StringBuilder,不会生成大量的字符串对象).Math类的用法.字符串池的概念 (2)Sca ...

  8. 在Python中数据类型转换的注意事项

    在学习Python的过程接触到了数据类型转化这一过程,在实践的过程中我发现了一个小问题,我们在平常的使用中要一定注意 在str型转换成int型的过程中,str内的内容必须是整数不然会报错 如图: 在转 ...

  9. 201521123005 《Java程序设计》 第十周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 1.finally 题目4-2 1.1 截图你的提交结果(出 ...

  10. 201521123068 《java程序设计》 第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 多线程的冲突:同时运行的线程需要访问共享数据(临界资源) 多线程的互斥访问:两个或两个以上的线程需要同时对同一数据 ...