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. HTTP协议知多少-关于http1.x、http2、SPDY的相关知识

    作为网站开发的基础协议,我们知道浏览器上都有输出http这四个字母,这意味着什么呢? 这就是最基础的HTTP协议. 逐浪君今天为各位大人准备了一些HTTP技术的知识,来和大家分享. 以下图为例: 这一 ...

  2. Microsoft Dynamics 365 之 味全食品 项目分享和Customer Engagement新特性分享

    味全食品 Dynamics 365项目: 在企业门户和电子商务等新营销模式频出的今天,零售业需要利用统一的管理平台管理日益庞大的客户及销售数据,整合线上线下的零售业务,从采购.仓储.生产.配送到销售. ...

  3. 图像处理：卷积模块FPGA 硬件加速

    本文记录了利用FPGA加速图像处理中的卷积计算的设计与实现.实现环境为Altera公司的Cyclone IV型芯片,NIOS II软核+FPGA架构. 由于这是第一次设计硬件加速模块,设计中的瑕疵以及 ...

  4. 改造百度ueditor字体为rem及相关体会

    提到富文本,可能大家都用到过百度的ueditor,作为一个重量级的插件,总结起来一句话,功能很强大,使用很费心.不知道是不是太久没有维护了,ueditor的文档可读性还真是差也可能是悟性不够吧.本文也 ...

  5. C# 委托、匿名方法、lambda简介

    在.NET中,委托,匿名方法和Lambda表达式很容易发生混淆.我想下面的代码能证实这点.下面哪一个First会被编译?哪一个会返回我们需要的结果?即Customer.ID=5.答案是6个First不 ...

  6. MongoDB学习之路(一)

    NoSQL简介 NoSQL(Not Only SQL),意为"不仅仅是SQL" 关系型数据库遵循ACID规则 1. A(Atomicity)原子性 指的是事务里的所有操作要么全部做 ...

  7. 201521123111《Java程序设计》第4周学习总结

    1. 本章学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. Answer: - 上课还讲了tostring的使用,般toString用于返回表示对象值的 ...

  8. 201521123029《Java程序设计》第十周学习总结

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

  9. PTA分享码-Java

    主要用于Java语法练习,非竞赛类题目.   1. Java入门          959dbf0b7729daa61d379ec95fb8ddb0   2. Java基本语法   23bd8870e ...

  10. 小甲鱼：Python学习笔记002_数组_元组_字符串

    创建普通数组 >>> member=["山东黄金","九阳股份"] >>> member ['山东黄金', '九阳股份'] ...