webpack对js通用模块的封装-优快云博客

本文详细介绍了如何使用Webpack进行前端项目的搭建与配置，包括HTML渲染、图标字体安装、CSS加载等，并展示了如何通过html-loader实现模板字符串的动态加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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/