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. 比较三个 CSS 预处理器：Sass、LESS 和 Stylus（上）

    前沿 : 第一次写不够成熟,可能描述有所错误,还请大家修改指正,我会对已完成的文章进行修改. 一.什么是CSS预处理器 CSS预处理器定义了一种新的语言,基本的思想是用一种专门的编程语言,开发者只需要 ...

  2. 3.修改第一个程序来点亮LED

    在上一节中已经将驱动程序框架搭建好了 接下来开始写硬件的操作(控制LED): (1)看原理图,确定引脚 (2)看2440手册 (3)写代码(需要使用ioremap()函数映射虚拟地址,在linux中只 ...

  3. [转载]Linux shell中的竖线（|）——管道符号

    原文地址:Linux shell中的竖线(|)--管道符号作者:潇潇 管道符号,是unix一个很强大的功能,符号为一条竖线:"|". 用法: command 1 | command ...

  4. 软工+C(2017第5期) 工具和结构化

    // 上一篇:Alpha/Beta换人 // 下一篇:最近发展区/脚手架 工具/轮子 软件工程/计算机相关专业的一个特点是会使用到众多的工具,工具的使用是从程序猿进化到程序员的一个关键要素.软件工程师 ...

  5. 分而治之（Work Breakdown Structure, WBS）

    不知道大家有没有和我一样的情况,就是想写一篇博客,不知道从何写起,如何组织语言,如何安排这篇博客的要交待的事情的前因后果:如果在写作过程中被打断,又不知道如何重新拾起键盘,从哪里写起."就如 ...

  6. 英语学习app案列分析

    很多同学有误解,软件工程课是否就是理论课?或者是几个牛人拼命写代码,其他人打酱油的课?要不然就是学习一个程序语言,搞一个职业培训的课?都不对,软件工程有理论,有实践,更重要的是分析,思辨,总结.在课程 ...

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

    1. 本周学习总结 2. 书面作业 ArrayList代码分析 1.1 解释ArrayList的contains源代码 //contains()方法 public boolean contains(O ...

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

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

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

    1. 本章学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 2. 书面作业 1. 代码阅读:Child压缩包内源代码 1.1 com.par ...

  10. 201521123065《java程序设计》第12周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 1.流的划分:输入流:字节流(InputStream).字符流(reader): 输出流:字节流(Output ...