首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJune 29, 2017

webpack系列目录

基于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 + '/*.{js,jsx}')
 var map = {};

 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(),
 output: {
  path: path.join(__dirname, "dist"),
  filename: "[name].js"
 },
 ......
 //以下省略，可以见下文详细配置

测试

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

//js只有两行代码，在body中加一句话
var $ = require("jquery")
$("<div>这是jquery生成的多页面示例</div>").appendTo("body")

2.新增pageA.html，也顺便修改原来的index.html 对于js文件名的更改

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="../dist/index.js"></script>
</body>
</html>

3.执行webpack，启动dev-server

$ webpack
$ webpack-dev-server

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

OK，成功打包生成pageA.js,成功运行

二：公共库单独打包

先来分析下，上个步骤打包的日志：

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

index.js 依赖了avalon 和 jquery，然后打包后的index.js 有480kb

pageA.js 只用了jquery，然后打包后的js 有294kb

那么如果引用的lib库多一点，又被很多页面引用，那么lib库就会被重复打包到page.js中去，模块越多重复加载的情况越严重。

如果把公共代码提取出来作为单独的js，那么就到处可以复用，浏览器也就可以进行缓存，这时候就需要用到webpack内置插件WebPack.optimize.CommonsChunkPlugin

CommonsChunkPlugin 介绍

使用

new webpack.optimize.CommonsChunkPlugin(options)

Options
翻译得比较简单，详见官方说明:

  1. options.name or options.names(string|string[]): 公共模块的名称
  2. options.filename (string): 公开模块的文件名（生成的文件名）
  3. options.minChunks (number|Infinity|function(module,count) - boolean): 为number表示需要被多少个entries依赖才会被打包到公共代码库；为Infinity 仅仅创建公共组件块，不会把任何modules打包进去。并且提供function，以便于自定义逻辑。
  4. options.chunks(string[]):只对该chunks中的代码进行提取。
  5. options.children(boolean):如果为true,那么公共组件的所有子依赖都将被选择进来
  6. options.async(boolean|string):如果为true,将创建一个 option.name的子chunks（options.chunks的同级chunks） 异步common chunk
  7. options.minSize(number):所有公共module的size 要大于number，才会创建common chunk

2个常用的例子，更多例子见官方说明:

1.Commons chunk for entries：针对入口文件提取公共代码

new CommonsChunkPlugin({
 name: "commons",
 // (the commons chunk name)

 filename: "commons.js",
 // (the filename of the commons chunk)

 // minChunks: 3,
 // (Modules must be shared between 3 entries)

 // chunks: ["pageA", "pageB"],
 // (Only use these entries)
})

2.Explicit vendor chunk：直接指定第三方依赖库，打包成公共组件

entry: {
 vendor: ["jquery", "other-lib"],
 app: "./entry"
}
new CommonsChunkPlugin({
 name: "vendor",

 // filename: "vendor.js"
 // (Give the chunk a different name)

 minChunks: Infinity,
 // (with more entries, this ensures that no other module
 // goes into the vendor chunk)
})

CommonsChunkPlugin使用

基于上篇的项目，参考上面的第二个例子，我们将jquery 和 avalon 提取出来打包成vendor.js

完整的webpack.config.js 如下：

```js 
var webpack = require("webpack");
 var path = require("path");
 var srcDir = path.resolve(process.cwd(), 'src');
 var nodeModPath = path.resolve(__dirname, './node_modules');
 var pathMap = require('./src/pathmap.json');
 var glob = require('glob')
 var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
 var entries= function () {
 var jsDir = path.resolve(srcDir, 'js')
 var entryFiles = glob.sync(jsDir + '/*.{js,jsx}')
 var map = {};
 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;
}

module.exports = {
 //entry: "./src/js/index.js",
 //entry: entries(),
 entry: Object.assign(entries(), {
  // 用到什么公共lib（例如jquery.js），就把它加进vendor去，目的是将公用库单独提取打包
  'vendor': ['jquery', 'avalon']
 }),
 output: {
  path: path.join(__dirname, "dist"),
  filename: "[name].js"
 },
 module: {
  loaders: [
   {test: /\.css$/, loader: 'style-loader!css-loader'}
  ]
 },
 resolve: {
  extensions: ['.js', "", ".css"],
  root: [srcDir,nodeModPath],
  alias: pathMap,
  publicPath: '/'
 },
 plugins: [
  new CommonsChunkPlugin({
   name: 'vendor',
   minChunks: Infinity
  })
 ]
}
```

测试、验证

1.修改入口(Object.assign 是html5.js里面的....)

//entry: entries(),
entry: Object.assign(entries(), {
 // 用到什么公共lib（例如jquery.js），就把它加进vendor去，目的是将公用库单独提取打包
 'vendor': ['jquery', 'avalon']
}),

2.加入插件CommonsChunkPlugin

var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
config 中增加 plugins
 plugins: [
  new CommonsChunkPlugin({
   name: 'vendor',
   minChunks: Infinity
  })
 ]

3.修改index.html 和 pageA.html，增加对verdor.js的引用

<script src="../dist/vendor.js"></script>
<script src="../dist/index.js"></script>
//<script src="../dist/pageA.js"></script>

4.执行webpack

$ webpack

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

结果分析

可以看到index.js 就只有457 bytes了，pageA.js 227bytes。vendor.js 是集成了jquery+avalon，所以有488kb。

这样vendor.js 就可以重复利用了，也方便浏览器进行缓存。

调试过程中发现

Uncaught ReferenceError: webpackJsonp is not defined

这个是因为当时把vendor.js引入 放到了page.js 后面，导致page.js执行异常，所以，请一定把vendor.js 放在前面。

生成后的index.js就很轻便了，第三方库都被打包到vendor中了，代码如下:

webpackJsonp([0],[
/* 0 */
/***/ function(module, exports, __webpack_require__) {

 /**
  * Created by sloong on 2016/6/1.
  */
 //avalon 测试
 var avalon = __webpack_require__(1);
 avalon.define({
  $id: "avalonCtrl",
  name: "Hello Avalon!"
 });

 /*
 //zepto 测试
 require("zepto")

 $("<div>这是zepto生成的</div>").appendTo("body")*/

 //jquery 测试
 var $ = __webpack_require__(2)
 $("<div>这是jquery生成的</div>").appendTo("body")

/***/ }
]);

页面测试均正常

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

OK，本篇结束了。如何让webpack 自动在html文件中引入所需js的script标签，如何给js和css文件加了hash值，这样浏览器每次都能检测到文件变更，而且也不需要手动修改引入的js文件链接，这些操作webpack都能轻松搞定

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

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

- Author -

sloong

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
一句话JavaScript表单验证代码
Aug 02 Javascript
ajax java 实现自动完成功能
Dec 19 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
Javascript 制作图形验证码实例详解
Dec 22 Javascript
Reactjs实现通用分页组件的实例代码
Jan 19 Javascript
Cpage.js给组件绑定事件的实现代码
Aug 31 Javascript
layui radio性别单选框赋值方法
Aug 15 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
Oct 30 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 Javascript
用js实现放大镜效果
Oct 28 Javascript
详解webpack 如何集成第三方js库
Jun 29 #Javascript
详解webpack介绍&amp;安装&amp;常用命令
Jun 29 #Javascript
基于node.js制作简单爬虫教程
Jun 29 #Javascript
JavaScript算法教程之sku（库存量单位）详解
Jun 29 #Javascript
详解webpack自动生成html页面
Jun 29 #Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 #Javascript
详解webpack分包及异步加载套路
Jun 29 #Javascript
Mint UI(1) 加密(1) 面向对象(3) 相对路径(1) requests(1) 解密(1) openpyxl(1) 相对路径 (1) hashlib(1) hmac(1)
You might like
php实现的发送带附件邮件类实例
2014/09/22 PHP
用php和jQuery来实现“顶”和“踩”的投票功能
2016/10/13 PHP
使用PHP开发留言板功能
2019/11/19 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
2020/04/06 PHP
JS 自动安装exe程序
2008/11/30 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
javascript Event对象详解及使用示例
2013/11/22 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
yepnope.js使用详解及示例分享
2014/06/23 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
vue中的计算属性实例详解
2018/09/19 Javascript
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
vue 实现一个简单的全局调用弹窗案例
2020/09/10 Javascript
python多线程编程方式分析示例详解
2013/12/06 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
Python2和3字符编码的区别知识点整理
2019/08/08 Python
numpy.array 操作使用简单总结
2019/11/08 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
加拿大在线隐形眼镜专家：PerfectLens.ca
2016/11/19 全球购物
法国和欧洲海边和滑雪度假：Pierre & Vacances
2017/01/04 全球购物
Wojas罗马尼亚网站：波兰皮鞋品牌
2018/11/01 全球购物
Currentbody西班牙：美容仪专家
2019/09/28 全球购物
戴尔新西兰官网：Dell New Zealand
2020/01/07 全球购物
sort命令的作用和用法
2012/11/04 面试题
linux比较文件内容的命令是什么
2015/09/23 面试题
秋季红领巾广播稿
2014/01/27 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
《普罗米修斯》教学反思
2016/02/22 职场文书