多个html入口打包,详解webpack 多页面/入口支持&公共组件单独打包

webpack系列目录

基于webpack搭建纯静态页面型前端工程解决方案模板， 最终形态源码见github:

正文

本篇主要介绍：如何自动构建入口文件，并生成对应的output；公共js库如何单独打包。

多入口文件，自动扫描入口。同时支持SPA和多页面型的项目

公共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.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"

},......

//以下省略，可以见下文详细配置

测试

1.在src/js目录中新增pageA.js

这是jquery生成的多页面示例").appendTo("body")