webpack 传统 jquery + bootstarp 搭建

最近有个项目,不过是用的ui框架还是bootstarp,在bootstarp使用嘛,也就剩下ng5这个兼容比较好,但是ng5呢框架太大了,又大题小做,但是现在的第三方库嘛 npm 有是一个很好用的东西,能用白不用啊。所以就想到用webpack 基于 传统 mvc 的思路搭建一个 小型框架来处理这样一个问题

现在的webpack使用最多的领域是,vue react ng这些 mvvm 领域中比较多,
而传统的 jquery + bootstarp + requiredJs 比较多

今天带来的是webpack 版本的 前端框架

先来看项目结构


image.png
- demo
    - src                #代码开发目录
        - less            #css目录,按照页面(模块)、通用、第三方三个级别进行组织
            + common
            + index.less
            + aboout.less
                     + list.less
            ...
        + images         #图片资源
        - js             #JS脚本,按照page、components进行组织
            + index.js
            + about.js
            + list.js
            ...
        index.html       #HTML模板
        about.html
        list.html
    - dist               #webpack编译打包输出目录,无需建立目录可由webpack根据配置自动生成
        + css                
        + js
        +images
        index.html
        about.html
        list.html
    + node_modules       #所使用的nodejs模块
    package.json         #项目配置
    webpack.config.js    #webpack配置

package.json

{
  "name": "fnji",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --progress --colors --inline",
    "build": "webpack -p"
  },
  "author": "",
  "description": "",
  "devDependencies": {
    "babel": "^6.3.13",
    "babel-core": "^6.3.21",
    "babel-loader": "^6.2.0",
    "babel-plugin-transform-runtime": "^6.3.13",
    "babel-preset-es2015": "^6.3.13",
    "babel-runtime": "^5.8.34",
    "clean-webpack-plugin": "^0.1.10",
    "copy-webpack-plugin": "^3.0.1",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "glob": "^7.0.5",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.9.0",
    "imports-loader": "^0.6.5",
    "jquery": "^1.12.4",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.13",
    "webpack-dev-server": "^1.14.1"
  }
}

webpack.config.js

var path = require('path');
var glob = require('glob');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');//将你的行内样式提取到单独的css文件里,
var HtmlWebpackPlugin = require('html-webpack-plugin'); //html模板生成器
var CleanPlugin = require('clean-webpack-plugin'); // 文件夹清除工具
var CopyWebpackPlugin = require('copy-webpack-plugin'); // 文件拷贝
var config = {
    entry: { //配置入口文件,有几个写几个
        index: './src/js/index.js'
    },
    output: {
        path: path.join(__dirname, 'dist'), //打包后生成的目录
        publicPath: '',//模板、样式、脚本、图片等资源对应的server上的路径
        filename: 'js/[name].[hash:6].js',//根据对应入口名称,生成对应js名称
        chunkFilename: 'js/[id].chunk.js'   //chunk生成的配置
    },
    resolve: {
        root: [],
        //设置require或import的时候可以不需要带后缀
        extensions: ['', '.js', '.less', '.css']
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style', 'css')
            },
            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract('css!less')
            },
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015']
                }
            },
            {
                test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'file-loader?name=./fonts/[name].[ext]'
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'url',
                query: {
                    limit: 30720, //30kb 图片转base64。设置图片大小,小于此数则转换。
                    name: '../images/[name].[ext]?' //输出目录以及名称
                }
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({ //全局配置加载
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        }),
        new CleanPlugin(['dist']),// 清空dist文件夹
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common', // 将公共模块提取,生成名为`vendors`的chunk
            minChunks: 3 // 提取至少3个模块共有的部分
        }),
        new ExtractTextPlugin("css/[name].[hash:6].css"), //提取CSS行内样式,转化为link引入
        new webpack.optimize.UglifyJsPlugin({ // js压缩
            compress: {
                warnings: false
            }
        }),
        new CopyWebpackPlugin([
            { from: './src/images', to: './images' } //拷贝图片
        ])
    ],
    externals: {
        $: 'jQuery'
    },
    //devtool: '#source-map',
    //使用webpack-dev-server服务器,提高开发效率
    devServer: {
        // contentBase: './',
        host: 'localhost',
        port: 8188, //端口
        inline: true,
        hot: false,
    }
};
module.exports = config;
var pages = Object.keys(getEntry('./src/*.html'));
var confTitle = [
    { name: 'index', title: '这是首页标题' },
    { name: 'list', title: '这是列表标题' },
    { name: 'about', title: '这是关于我标题' }
]
//生成HTML模板
pages.forEach(function (pathname) {
    var itemName = pathname.split('src\\') //根据系统路径来取文件名,window下的做法//,其它系统另测
    var conf = {
        filename: itemName[1] + '.html', //生成的html存放路径,相对于path
        template: pathname + '.html', //html模板路径
        inject: true, //允许插件修改哪些内容,包括head与body
        hash: false, //是否添加hash值
        minify: { //压缩HTML文件
            removeComments: true,//移除HTML中的注释
            collapseWhitespace: false //删除空白符与换行符
        }
    };
    conf.chunks = ['common', itemName[1]]
    for (var i in confTitle) {
        if (confTitle[i].name === itemName[1]) {
            conf.title = confTitle[i].title
        }
    }
    config.plugins.push(new HtmlWebpackPlugin(conf));
});
//按文件名来获取入口文件(即需要生成的模板文件数量)
function getEntry(globPath) {
    var files = glob.sync(globPath);
    var entries = {},
        entry, dirname, basename, pathname, extname;
    for (var i = 0; i < files.length; i++) {
        entry = files[i];
        dirname = path.dirname(entry);
        extname = path.extname(entry);
        basename = path.basename(entry, extname);
        pathname = path.join(dirname, basename);
        entries[pathname] = './' + entry;
    }
    return entries;
}

我们的代码写在 src 下面


image.png

index.html

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8">
    <title>
        <%= htmlWebpackPlugin.options.title %>
    </title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="baidu-site-verification" content="wczeFssEiy" />
    <meta http-equiv="Cache-Control" content="no-transform " />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
</head>

<body>
    <div id="test">
        这是首页
        <p>
            这是一个段落说明!
        </p>
    </div>
</body>

</html>

index.js

require('../less/index.less');
$('body').append('这是js生产的:index页面');

index.less

@charset "utf-8";
    /*
    * @description: 首页
    * @author: duanliang
    * @updateTime: 2016-9-3
    */
    /*变量定义*/
    @width: 500px;
    @color: #333;
    @fontSize: 16px;
    #test { 
        width: @width;
        height:100px;
        border:1px solid #ccc;
        color: @color;
        font-size: @fontSize;
        margin:30px auto;
        p.info { 
            background-color:#f34;
            color: @color;
        }
    }

使用方式:

1、下载后,解压安装包。
 
2、打开cmd命名行,进入到解压目录。
 
3、输入指令 npm install 安装项目所依赖的包
 
4、安装成功,运行指令 npm run dev
 
5、运行成功。浏览器输入:http://localhost:8188/ 即可看到效果
 
备注:页面切换的话,直接域名+页面名称即可。
 
比如:  http://localhost:8188/index.html  //首页
 
     http://localhost:8188/about.html //关于我页面
       
     http://localhost:8188/list.html  //列表页面

最后吐槽一下webpack 对图片的处理真的很弱

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容