1、html渲染
npm install hogan --save
2、安装iconawesome字体
npm install font-awedsome --save
二、配置和html引用、css加载的使用方法
1、webpack.config.js设置
entry: {
'common' : ['./src/page/common/index.js'],
'index' : ['./src/page/index/index.js'], }, module:{ loaders: [ { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader","css-loader") }, { test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=50000&name=[path][name].[ext]'} ] }, resolve : { alias : { node_modules : __dirname + '/node_modules', util : __dirname + '/src/util', page : __dirname + '/src/page', service : __dirname + '/src/service', image : __dirname + '/src/image' } },文件夹名字配置，html-loader方式渲染配置
2、page/common/index.js引入
require('./layout.css');
require('node_modules/font-awesome/css/font-awesome.min.css');3、view/index.html页面中使用示例
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8" /> <%= require('html-loader!./layout/head-common.html') %> <title>电商平台</title> </head> <body> <%= require('html-loader!./layout/header.html') %> <%= require('html-loader!./layout/footer.html') %> </body> </html>
三、string、title的定制
1、webpack.config.js设置
var path = require('path');
var webpack = require('webpack'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); var HtmlWebpackPlugin = require('html-webpack-plugin'); // 环境变量的设定 var WEBPACK_ENV = process.env.WEBPACK_ENV || 'dev_win'; console.log(WEBPACK_ENV); var getHtmlConfig=function (name,title) { return{ template :'./src/view/'+ name +'.html', filename :'view/'+ name +'.html', title : title, inject : true, hash : true, chunks : ['common',name] } } var config = { entry: { 'common' : ['./src/page/common/index.js'], 'index' : ['./src/page/index/index.js'], 'user-login' : ['./src/page/user-login/index.js'], }, output: { path: './dist', publicPath : '/dist', filename: 'js/[name].js' }, externals: { 'jquery': 'window.jQuery' }, module:{ loaders: [ { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader","css-loader") }, { test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=50000&name=[path][name].[ext]'}, { test: /\.string$/, loader: 'html-loader'} ] }, resolve : { alias : { node_modules : __dirname + '/node_modules', util : __dirname + '/src/util', page : __dirname + '/src/page', service : __dirname + '/src/service', image : __dirname + '/src/image' } }, plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: 'common', filename: 'js/base.js' }), new ExtractTextPlugin("css/[name].css"), new HtmlWebpackPlugin(getHtmlConfig('index','首页')), new HtmlWebpackPlugin(getHtmlConfig('user-login','用户登录')), ] }; if('dev_win'===WEBPACK_ENV){ config.entry.common.push('webpack-dev-server/client?http://localhost:8080/') } module.exports = config;2、page/common/nav-side/index.string字符串
{{#navList}}
{{#isActive}} <li class="nav-item active"> {{/isActive}} {{^isActive}} <li class="nav-item"> {{/isActive}} <a href="{{href}}" class="link">{{desc}}</a> </li> {{/navList}}3、page/common/nav-side/index.js（mm工具会在后面说明）
'use strict';
require('./index.css')
var _mm = require('util/mm.js'); var templateIndex = require('./index.string'); // 导航 var navSide={ option : { name: '', navList:[ {name : 'user-center',desc:'个人中心',href:'./user-center.html'}, {name : 'order-list',desc:'我的订单',href:'./user-list.html'}, {name : 'pass-update',desc:'修改密码',href:'./pass-update.html'}, {name : 'about',desc:'关于MMall',href:'./about.html'} ] }, // // 渲染导航菜单 renderNav : function(){ for (var i = 0,iLength = this.option.navList.length;i<iLength;i++) { if(this.option.navList[i].name === this.option.name){ this.option.navList[i].isActive = true; } }; // 渲染list数据 var navHtml = _mm.renderHtml(templateIndex,{ navList : this.option.navList }); // // 把html放入容器 $('.nav-side').html(navHtml) }, init : function(option){ // 合并选项 $.extend(this.option,option); this.renderNav(); }, } module.exports = navSide;4、view/index.html（css略）页面引入
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8" /> <%= require('html-loader!./layout/head-common.html') %> <title><%= htmlWebpackPlugin.options.title%>--happlmmall电商平台</title> </head> <body> <%= require('html-loader!./layout/nav.html') %> <%= require('html-loader!./layout/header.html') %> <%= require('html-loader!./layout/