webpack系列目录
基于webpack搭建纯静态页面型前端工程解决方案模板， 最终形态源码见github:
正文
本篇主要介绍：如何自动构建入口文件，并生成对应的output；公共js库如何单独打包。
公共js库如何单独打包。
上一篇示例，主要介绍如何集成第三方js库到项目中使用，如jquery。示例的入口只有一个index，而且是将公共js库连同page.js一起打包到output.js中。那么在开发中会出现，每新增一个页面模块，就需要修改webpack.config.js配置文件（增加一个入口），而且如果用到的第三方库比较多，这样也容易导致jquery,React等代码库重复被合并到打包后的js，导致js体积过大，页面加载时间过长
基础结构和准备工作
目录结构说明
文件a
│ ├── pageB.html # 入口文件b
│ ├── css/ # css资源
│ ├── img/ # 图片资源
│ ├── js # js&jsx资源
│ │ ├── pageA.js # a页面入口
│ │ ├── pageB.js # b页面入口
│ │ ├── lib/ # 没有存放在npm的第三方库或者下载存放到本地的基础库，如jQuery、Zepto、avalon
│ ├── pathmap.json # 手动配置某些模块的路径，可以加快webpack的编译速度
├── webpack.config.js # webpack配置入口
一：自动构建入口
官方多入口示例
webpack默认支持多入口，官方也有。配件文件webpack.config.js如下
每新增一个页面就需要在webpack.config.js的entry 中增加一个 pageC:"./pageC"，页面少还好，页面一多，就有点麻烦了，而且配置文件，尽可能不改动。那么如何支持不修改配置呢？
自动构建入口函数
entry实际上是一个map对象，结构如下{filename:filepath}，那么我们可以根据文件名匹配，很容易构造自动扫描器： npm 中有一个用于文件名匹配的 glob模块，通过glob很容易遍历出src/js目录下的所有js文件：
安装glob模块
修改webpack.config.js 配置，新增entries函数，修改entry:entries()，修改output的filename为"[name].js"
for (var i = 0; i < entryFiles.length; i++) {
var filePath = entryFiles[i];
var filename = filePath.substring(filePath.lastIndexOf('\/') + 1,filePath.lastIndexOf('.'));
map[filename] = filePath;
}
return map;
}
//修改入口，已经修改outp的filename
module.exports = {
//entry: "./src/js/index.js",entry: entries(),"dist"),filename: "[name].js"
},......
//以下省略，可以见下文详细配置
var filePath = entryFiles[i];
var filename = filePath.substring(filePath.lastIndexOf('\/') + 1,filePath.lastIndexOf('.'));
map[filename] = filePath;
}
return map;
}
//修改入口，已经修改outp的filename
module.exports = {
//entry: "./src/js/index.js",entry: entries(),"dist"),filename: "[name].js"
},......
//以下省略，可以见下文详细配置
测试
1.在src/js目录中新增pageA.js
这是jquery生成的多页面示例
").appendTo("body")
