一步步编写avalon组件02：分页组件

本章节，我们做分页组件，这是一个非常常用的组件。grid, listview都离不开它。因此其各种形态也有。

然后建webpack.config开始构建工程：

var webpack = require('webpack');

var path = require('path');

function heredoc(fn) {
return fn.toString().replace(/^[^\/]+\/*!?\s?/, '').
replace(/*\/[^\/]+$/, '').trim().replace(/>\s*
只支持现代浏览器(IE9+)

 */

})

module.exports = {
entry: {
index: './main'
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js',
libraryTarget: 'umd',
library: 'avalon'
}, //页面引用的文件
plugins: [
new webpack.BannerPlugin('分页 by 司徒正美\n' + api)
],
module: {
loaders: [
//ExtractTextPlugin.extract('style-loader', 'css-loader','sass-loader')
//http://react-china.org/t/webpack-extracttextplugin-autoprefixer/1922/4
// https://github.com/b82/webpack-basic-starter/blob/master/webpack.config.js
{test: /.html$/, loader: 'raw!html-minify'}
]
},
'html-minify-loader': {
empty: true, // KEEP empty attributes
cdata: true, // KEEP CDATA from scripts
comments: true, // KEEP comments
dom: {// options of !(htmlparser2)[https://github.com/fb55/htmlparser2]
lowerCaseAttributeNames: false, // do not call .toLowerCase for each attribute name (Angular2 use camelCase attributes)
}
},
resolve: {
extensions: ['.js', '', '.css']
}
}

执行webpack --watch，打包后打开页面：![超级产品经理](https://v1cdn.imspm.com/imspm.com超级产品经理2016062913nddykw55muk.png)\s*     只支持现代浏览器(IE9+)     */})var ExtractTextPlugin = require('extract-text-webpack-plugin');var cssExtractor = new ExtractTextPlugin('/[name].css');module.exports = {    entry: {        index: './main'    },    output: {        path: path.join(__dirname, 'dist'),        filename: '[name].js',        libraryTarget: 'umd',        library: 'avalon'    }, //页面引用的文件    plugins: [        new webpack.BannerPlugin('分页 by 司徒正美\n' + api)    ],    module: {        loaders: [            //http://react-china.org/t/webpack-extracttextplugin-autoprefixer/1922/4            // https://github.com/b82/webpack-basic-starter/blob/master/webpack.config.js             {test: /\.html$/, loader: 'raw!html-minify'},            {test: /\.scss$/, loader: cssExtractor.extract( 'css!sass')}        ]    },    'html-minify-loader': {        empty: true, // KEEP empty attributes        cdata: true, // KEEP CDATA from scripts        comments: true, // KEEP comments        dom: {// options of !(htmlparser2)[https://github.com/fb55/htmlparser2]            lowerCaseAttributeNames: false, // do not call .toLowerCase for each attribute name (Angular2 use camelCase attributes)        }    },    plugins: [        cssExtractor    ],    resolve: {        extensions: ['.js', '', '.css']    }}

修改页面的link为

但这时我们的CSS与JS还没有压缩，这个很简单，

webpack -p

于是dist目录下的js, css全部压成一行了！

最后大家可以在这里下到这个工程

相关链接

1. jQuery分页插件

2. 12个基于 jQuery 框架的 Ajax 分页插件

关键字：avalonjs, avalon

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！