webpack系列目录
webpack 系列 二：webpack 介绍&安装
webpack 系列 三：webpack 如何集成第三方js库
webpack 系列 四：webpack 多页面支持 & 公共组件单独打包
webpack 系列 五：webpack Loaders 模块加载器
webpack 系列 六：前端项目模板-webpack+gulp实现自动构建部署
基于webpack搭建纯静态页面型前端工程解决方案模板， 最终形态源码见github: https://github.com/ifengkou/webpack-template
正文
本篇主要介绍：如何自动构建入口文件，并生成对应的output；公共js库如何单独打包。
多入口文件，自动扫描入口。同时支持SPA和多页面型的项目
公共js库如何单独打包。
上一篇示例，主要介绍如何集成第三方js库到项目中使用，如jquery。示例的入口只有一个index，而且是将公共js库连同page.js一起打包到output.js中。那么在开发中会出现，每新增一个页面模块，就需要修改webpack.config.js配置文件（增加一个入口），而且如果用到的第三方库比较多，这样也容易导致jquery,React等代码库重复被合并到打包后的js，导致js体积过大，页面加载时间过长
基础结构和准备工作
以下示例基于上一篇进行改进，上一篇项目源码
目录结构说明
. ├── package.json # 项目配置 ├── src # 源码目录 │ ├── pageA.html # 入口文件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如下
//已简化
var path = require("path");
module.exports = {
entry: {
pageA: "./pageA",
pageB: "./pageB"
},
output: {
path: path.join(__dirname, "js"),
filename: "[name].bundle.js",
chunkFilename: "[id].chunk.js"
}
}
每新增一个页面就需要在webpack.config.js的entry 中增加一个 pageC:"./pageC"，页面少还好，页面一多，就有点麻烦了，而且配置文件，尽可能不改动。那么如何支持不修改配置呢？
自动构建入口函数
entry实际上是一个map对象，结构如下{filename:filepath}，那么我们可以根据文件名匹配，很容易构造自动扫描器：
npm 中有一个用于文件名匹配的 glob模块，通过glob很容易遍历出src/js目录下的所有js文件：
安装glob模块
$ npm install glob --save-dev
修改webpack.config.js 配置，新增entries函数，修改entry:entries()，修改output的filename为"[name].js"
//引入glob
var glob = require('glob')
//entries函数
var entries= function () {
var jsDir = path.resolve(srcDir, 'js')
var entryFiles = glob.sync(jsDir + '
function(module, exports, __webpack_require__) {
//avalon 测试
var avalon = __webpack_require__(1);
avalon.define({
$id: "avalonCtrl",
name: "Hello Avalon!"
});
//jquery 测试
var $ = __webpack_require__(2)
$("这是jquery生成的").appendTo("body")
}
]);
页面测试均正常
OK，本篇结束了。如何让webpack 自动在html文件中引入所需js的script标签，如何给js和css文件加了hash值，这样浏览器每次都能检测到文件变更，而且也不需要手动修改引入的js文件链接，这些操作webpack都能轻松搞定
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。
