首先写一个一般处理程序来获取到你要加载到前台的数据，并序列化成json格式。
//代码实例public class AjaxUserList : IHttpHandler {
public void ProcessRequest(HttpContext context) {
context.Response.ContentType = "text/plain"
BLL.UserInfoBll userInfoBll = new BLL.UserInfoBll()
int pageIndex
if (!int.TryParse(context.Request["pageIndex"],out pageIndex)) {
pageIndex = 1
}
int pageSize = 5
int pageCount = userInfoBll.GetPageCount(pageSize)
//判断当前页码的取值范围
pageIndex = pageIndex < 1 ? 1 : pageIndex
pageIndex = pageIndex > pageCount ? pageCount : pageIndex
//获取分页数据
List<Model.UserInfo> userList = userInfoBll.GetPageList(pageIndex, pageSize)
//获取页码条
string pageBar = Util.PageBar.GetPageBar(pageIndex, pageCount)
//***********************************************************
//使用匿名类将多组数据序列化成Json格式
//***********************************************************
JavaScriptSerializer js = new JavaScriptSerializer()
string json = js.Serialize(new { resultUserList = userList, resultPageBar = pageBar })//此处使用了匿名类将userList集合和pageBar进行封装后，再序列化
//***********************************************************
context.Response.Write(json)
}
public bool IsReusable {
get {
return false
}
}
}
然后，前台ajax请求这个一般处理处理程序获取到json数据，再通过js将数据添加到html。
//加载用户列表示例function LoadUserInfo(pageIndex) {
$.post("AjaxUserList.ashx", { "pageIndex": pageIndex }, function (data) {
var serverData = $.parseJSON(data)
for (var i = 0 i < serverData.resultUserList.length i++) {
$("<tr><td>" + serverData.resultUserList[i].ID + "</td><td>" + serverData.resultUserList[i].UName + "</td><td>" + serverData.resultUserList[i].UPwd + "</td><td>" + ChangeDateFormat(serverData.resultUserList[i].SubTime) + "</td><td>" + serverData.resultUserList[i].Remark + "</td><td><a href='javascript:void(0)' class='details' Uid='" + serverData.resultUserList[i].ID + "'>详细</a></td><td><a href='javascript:void(0)' class='edits' Uid='" + serverData.resultUserList[i].ID + "'>编辑</a> <a href='javascript:void(0)' class='deletes' Uid='" + serverData.resultUserList[i].ID + "' UName='" + serverData.resultUserList[i].UName + "'>删除</a></td></tr>").appendTo("#tabUserList")
}
})
}
基于前面的入门文章，你对webpack的入口文件的概念应该比较清楚了，那么本文主要介绍一些entry配置细节。概念解释
如上图所示，在多个代码模块中会有一个起始的 .js 文件，这个便是 webpack 构建的入口。webpack 会读取这个文件，并从它开始解析依赖，然后进行打包。如图，一开始我们使用 webpack 构建时，默认的入口文件就是 ./src/index.js。
我们常见的项目中，如果是单页面应用，那么可能入口只有一个；如果是多个页面的项目，那么经常是一个页面会对应一个构建入口。
入口可以使用 entry 字段来进行配置，webpack 支持配置多个入口来进行构建。
不同写法场景
//单文件入口
module.exports = {
entry: './src/index.js'
}
// 上述配置等同于
module.exports = {
entry: {
main: './src/index.js'
}
}
//支持对象语法
module.exports = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
}
// 或者配置多个入口
module.exports = {
entry: {
foo: './src/page-foo.js',
bar: './src/page-bar.js',
// ...
}
}
// 使用数组来对多个文件进行打包，多个文件作为一个入口，webpack 会解析两个文件的依赖后进行打包
module.exports = {
entry: {
main: [
'./src/foo.js',
'./src/bar.js'
]
}
}
实际方案
单文件以及供应商
主要适用于有些第三方的文件不用杂糅到入口文件，分别进行依赖打包。
const config = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
}
多页应用入口方案设计
这个方案主要是针对多页应用的设计，我们可以针对多页分别设计自己的入口，除了更加清晰之外，讲为不同的入口文件提供不同的页面模板，有利于更好的提取公共文件，对于其他页面没有必要的文件不用加载。在入口点之间重复使用大量代码/模块的多页面应用程序可以大大受益于这些技术。
const config = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
}
备注：作为经验法则：一个页面最好只用一个入口文件的js
参考文档
掘金小册《使用 webpack 定制前端开发环境》
![[image]100 棋盘覆盖问题，求c语言数组递归的解答，和思路](/aiimages/%5Bimage%5D100+%E6%A3%8B%E7%9B%98%E8%A6%86%E7%9B%96%E9%97%AE%E9%A2%98%EF%BC%8C%E6%B1%82c%E8%AF%AD%E8%A8%80%E6%95%B0%E7%BB%84%E9%80%92%E5%BD%92%E7%9A%84%E8%A7%A3%E7%AD%94%EF%BC%8C%E5%92%8C%E6%80%9D%E8%B7%AF.png)
