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. vue引入百度地图api组件封装（根据地址定位）

    Map.vue <template> <div class="Map" :style="{ height: this.height+'px', widt ...

  2. js script放在head和body里面的区别

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp66       java script放在head和body的区别   ...

  3. Java缓存类的实际应用场景

    不要着迷于技术,应把注意力放到问题上. 一个普通的后台管理系统,一定会有参数配置.参数配置数据表和其他的数据表是不同的,它的操作基本都是查的操作.参数配置的这些数据信息是贯穿在整个项目中,那么把他们放 ...

  4. Project 4:Longest Ordered Subsequence

    Problem description A numeric sequence of ai is ordered if a1 < a2 < - < aN. Let the subseq ...

  5. 使用HttpGet请求json数据

  6. 四则运算GUI

    一.题目描述 我们在个人作业1中,用各种语言实现了一个命令行的四则运算小程序.进一步,本次要求把这个程序做成GUI(可以是Windows PC 上的,也可以是Mac.Linux,web,手机上的),成 ...

  7. 【Beta】阶段 第四次Daily Scrum Meeting

    每日任务 1.本次会议为第四次 Meeting会议: 2.本次会议在周四下午16:40,课间休息时间在陆大楼召开,召开本次会议为10分钟. 一.今日站立式会议照片 二.每个人的工作 (有work it ...

  8. Swing-JTable检测单元格数据变更事件

    在JTable的初级教程中往往会提到,使用TableModel的 addTableModelListener方法可以监听单元格数据的变更,在其事件处理函,数tableChanged中,可以通过e.ge ...

  9. 201521123100《Java程序设计》第八周学习总结

    ---恢复内容开始--- 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 1.List中指定元素的删除(题目4-1) 1.1 ...

  10. 201521123049 《JAVA程序设计》 第14周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...