webpack通用功能開發

時間 2019-11-10

標籤 webpack 通用功能開發简体版

原文原文鏈接

1、一些包安裝

一、html渲染

npm install hogan --save

安裝完成功有點問題，目前手動移動到以下圖的文件夾中javascript

追加：css

util下的能夠刪除html

二、安裝iconawesome字體

npm install font-awedsome --save

2、配置和html引用、css加載的使用方法

一、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方式渲染配置java

二、page/common/index.js引入

require('./layout.css');
require('node_modules/font-awesome/css/font-awesome.min.css');

三、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>

3、string、title的定製

一、webpack.config.js設置node

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;

二、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}}

三、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;

四、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/nav-side.html')  %>
        <%= require('html-loader!./layout/footer.html')  %>
    </body>
</html>

4、mm通用工具

在util/mm.js下，包含ajax的數據請求，服務器地址的獲取，url正則提取後的路徑，html模板渲染的，成功、錯誤提示，字段的正則驗證，對登陸的統一處理等jquery

'use strict';
var Hogan = require('hogan');
var conf={
    serverHost:''
};
var _mm = {
    request : function  (param) {
        var _this = this;
        $.ajax({
            type    : param.method   || 'get',
            url     : param.url      || '',
            dataType: param.type     || 'json',
            data    : param.data     || '',
            success : function (res) {
                // 請求成功
                if(0 === res.status){
                    typeof param.success === 'function' && param.success(res.data,res.msg);
                }
                // 若是沒有登陸則強制返回
                else if(10 === res.status){
                    _this.doLogin();
                }
                // 請求數據錯誤
                else if(1 === res.status){
                    typeof param.error === 'function' && param.error(res.msg)
                }
            },
            error   : function (err) {
                // body...
                typeof param.error === 'function' && param.error(err.statusText);
            }
        })

    },
    // 獲取服務器地址
    getServerUrl : function (path) {
        return conf.serverHost + path;
    },
    getUrlParam : function (name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
        var result = window.location.search.substr(1).match(reg);
        // return result ? result[2]:null
        return result ? decodeURIComponent(result[2]):null
    },
    // 渲染html模板
    renderHtml : function(htmlTemplate,data){
        var template = Hogan.compile(htmlTemplate),
            result      = template.render(data);
            // result      = htmlTemplate.render(data);
            return result;
    },
    // 成功提示
    successTips : function(msg){
        alert(msg || '操做成功！');
    },
    // 錯誤提示
    errorTips : function(msg){
        alert(msg || '哪裏不對啦！')
    },
    // 字段的驗證，支持非空，手機，郵箱
    validate : function(value,type){
        if('require' === type){
            // 網上查沒什麼區別，不曉得爲嘛！！寫法
            return !!value;
        }
        if('phone' === type){
            return /^1[34578]\d{9}$/.test(value);
        }
        if('email' === type){
            return /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/.test(value);
        }
    },
    // 統一登陸處理
    doLogin : function () {
        window.location.href = './user-login.html?redirect=' + encodeURIComponent(window.location.href)
    },
    goHome : function(){
        window.location.href = './index.html';
    }
}

module.exports = _mm;

4、樣式佈局（包含後面章節修改完整版）

引入css的方法webpack

一、layout的總體樣式示例：src/page/common/layout.css

*{
    margin: 0;
    padding: 0;
}
body{
    background: #f6f6f6;
    font: 12px/1.5 tahoma,arial,Microsoft YaHei,sans-serif;
}
li{
    list-style: none;
}
img{
    display: block;
    border:none
}
label{
    cursor:pointer;
}
button{border:none}
input[type='checkbox']{
    cursor:pointer
}

 /* 定寬佈局 */
.w{
    width: 1080px;
    margin:0 auto;
    position: relative;
    overflow: hidden;
}
.large .w{
    width:1600px
}

/* panel */
.panel{
    padding: 10px;
    margin-bottom: 10px;
    background: #fff
}
.panel .panel-title{
    padding: 10px;
    font-size: 14px;
    color: #666;
    font-weight: bold;
    border-bottom:1px solid #eee;
}
.panel .panel-body{
    padding: 10px;
    overflow: hidden;
}

 /* 全局通用樣式 */
.hide{
    display:none
}
.link{
    color:#999;
    cursor:pointer;
    text-decoration: none;
}
.link:hover{
    color:#e80012;
}
.link-text{
    color:#999;
    text-decoration:none;
}

 /* btn */
.btn{
    display:inline-block;
    padding:0 20px;
    height:40px;
    line-height: 40px;
    vertical-align: middle;
    border:none;
    background:#c60023;
    font-size:17px;
    color:#fff;
    outline:none;
    cursor:pointer;
    text-decoration:none;
}
.btn-mini{
    height:25px;
    line-height:25px;
    font-size:12px;
    padding:0 10px;
}
.loading{
    margin:10px auto;
    display:block;
    width:65px;
    height:65px;
    border:1px solid #ddd;
    border-radius:5px;
     background:url(../../image/icon/loading.gif) no-repeat;
     background-size: 100%;
    opacity: 6;
}

二、src/page/commonnav-side/index.css樣式web

/* 導航主體 */
.nav-side{
    float: left;
    width: 130px;
    min-height: 100px;
}

.nav-side .nav-item{
    line-height: 25px;
    font-size: 13px;
}

.nav-side .nav-item .link{
    color: #888
}

.nav-side .nav-item.active .link{
    color:#c60023;
}

 /* 右側內容區 */
.content.with-nav{
    float: left;
    width: 950px
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。