webpack对js通用模块的封装
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/