五、处理项目中的组件模板文件

例如：layer.html

 

         1）.使webpack，让他把模板文件当字符串处理

                   在layer.js里面把模板引入进来

                  

                    在app.js里面操作：

                  

                    模板文件添加div

                  

                  运行有一个错误；需要安装一个loader来处理他；

　　　　　　

                 添加匹配规则：

                  

                  再运行；修改一下看看生成页面变化；

 　　2）.使webpack，让他把模板文件当已经编译好的模板的处理函数

 　　　　有时候我们的模板会用到一些语法，比如ejs语法：

　　　　建一个layer.ejs 模板

 　　　　

　　　　看官网ejs说明：

 　　　　

　　　　载入 ejs模板，并返回一个已经编译好函数；

　　　　安装 ejs-loader

　　　　规则：

　　　　可以把layer.ejs改成layer.tpl

 　　　　

　　　　

　　　　这个时候的tpl已经是一个已经编译好函数；

　　　　可以用这个函数传入模板中要用到的数据：

 　　　　

　　　　再打包一下，发现模板被更新，内容也已经展示出来。

 　　　　

 

         现在比较流行的loader

         已经被集成到babel；无论vue2.0，还是react, 都可以通过babel这个工具支持jsx的语法