如何用ejs模版,通過webpack打包多入口輸出多頁面的靜態文件,和本地調試啟動


源碼地址:https://github.com/13476075014/04.node-vue-project/tree/master/03.singlewebpack/02.ejsHtml

具體配置和前面寫的一篇打包靜態html的類似:https://www.cnblogs.com/chun321/p/11996410.html

 

一:安裝依賴修改配置

npm install ejs-loader --save-dev
 
在webpack.config.js中修改配置:在module中添加ejs解析  {test: /\.ejs$/, loader: 'ejs-loader'}
 

 

二:新建ejs公用模版和引入需要使用的ejs頁面

根目錄新建 common的文件夾,存放公用的組件,新建公用的頭部common_header.ejs,和公用的底部common_bottom.ejs文件;
具體文件如下:

 

 views文件夾下面是需要在瀏覽器中訪問的頁面,在里面引入公用的ejs模版,方法如下,這里引入模版和ejs的語法有點不一致,是依照ejs-loader的標准寫的:

<%=require('_common/common_header.ejs')({title:'this is one'}) %>
</head>
<body>
    <h1>這是1</h1>

<!-- 引入的公用的底部 -->
<%=require('_common/common_bottom.ejs')() %>

使用的是require的方法而不是include 的方法,而且require后需要加上括號調用這個方法或者傳參數;

 

三:其他

其余的步驟基本和前面寫的打包靜態html一致,可以參考前面的,運行項目本地調試 npm start ,發布到線上打包 npm run 

prodbuild ,只需要把dist里面的靜態文件放到遠程服務器,然后配置路由和靜態文件的訪問即可
 
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM