webpack4 系列教程(三): 多页面解决方案--提取公共代码
这节课讲解
webpack4
打包多页面应用过程中的提取公共代码部分。相比于webpack3
,4.0
版本用optimization.splitChunks
配置替换了3.0
版本的CommonsChunkPlugin
插件。在使用和配置上,更加方便和清晰。
1. 准备工作
按照惯例,我们在src/
文件夹下创建pageA.js
和pageB.js
分别作为两个入口文件。同时,这两个入口文件同时引用subPageA.js
和subPageB.js
,而subPageA.js
和subPageB.js
又同时引用module.js
文件。
代码目录结构如下图所示:
希望大家理清逻辑关系,下面从底层往上层进行代码书写。
module.js
:
export default "module";
subPageA.js
:
import "./module";
export default "subPageA";
subPageB.js
:
import "./module";
export default "subPageB";
正如我们所见,subPageA.js
和subPageB.js
同时引用module.js
。
最后,我们封装入口文件。而为了让情况更真实,这两个入口文件又同时引用了lodash
这个第三方库。
pageA.js
:
import "./subPageA";
import "./subPageB";
import * as _ from "lodash";
console.log("At page 'A' :", _);
export default "pageA";
pageB.js
:
import "./subPageA";
import "./subPageB";
import * as _ from "lodash";
console.log("At page 'B' :", _);
export default "pageB";
好了,到此为止,需要编写的代码已经完成了。>>> src 文件夹项目源码
2. 编写webpack
配置文件
首先我们应该安装先关的库,创建package.json
,输入以下内容:
{
"devDependencies": {
"webpack": "^4.15.1"
},
"dependencies": {
"lodash": "^4.17.10"
}
}
在命令行中运行npm install
即可。
然后配置webpack.config.js
文件。文件配置如下:
const webpack = require("webpack");
const path = require("path");
module.exports = {
// 多页面应用
entry: {
pageA: "./src/pageA.js",
pageB: "./src/pageB.js"
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].bundle.js",
chunkFilename: "[name].chunk.js"
},
optimization: {
splitChunks: {
cacheGroups: {
// 注意: priority属性
// 其次: 打包业务中公共代码
common: {
name: "common",
chunks: "all",
minSize: 1,
priority: 0
},
// 首先: 打包node_modules中的文件
vendor: {
name: "vendor",
test: /[\\/]node_modules[\\/]/,
chunks: "all",
priority: 10
}
}
}
}
};
着重来看optimization.splitChunks
配置。我们将需要打包的代码放在cacheGroups
属性中。
其中,每个键对值就是被打包的一部分。例如代码中的common
和vendor
。值得注意的是,针对第三方库(例如lodash
)通过设置priority
来让其先被打包提取,最后再提取剩余代码。
所以,上述配置中公共代码的提取顺序其实是:
... ...
vendor: {
name: "vendor",
test: /[\\/]node_modules[\\/]/,
chunks: "all",
priority: 10
},
common: {
name: "common",
chunks: "all",
minSize: 1,
priority: 0
}
... ...
3. 打包和引用
命令行中运行webpack
即可打包。可以看到,我们成功提取了公共代码,如下图所示:
最后,打包的结果在dist/
文件夹下面,我们要在index.html
中引用打包好的js
文件,index.html
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="./dist/common.chunk.js"></script>
<script src="./dist/vendor.chunk.js"></script>
<script src="./dist/pageA.bundle.js"></script>
<script src="./dist/pageB.bundle.js"></script>
</body>
</html>
使用 Chrome 或者 Firfox 打开index.html
,并且打开控制台即可。
欢迎技术交流,引用请注明出处。
个人网站:GodBMW.com
原文链接:webpack4 系列教程(三): 多页面解决方案--提取公共代码
webpack4 系列教程(三): 多页面解决方案--提取公共代码的更多相关文章
- webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载
本节课讲解webpack4打包单页应用过程中的代码分割和代码懒加载.不同于多页面应用的提取公共代码,单页面的代码分割和懒加载不是通过webpack配置来实现的,而是通过webpack的写法和内置函数实 ...
- webpack4 系列教程: 前言
1. 什么是webpack? 前端目前最主流的javascript打包工具,在它的帮助下,开发者可以轻松地实现加密代码.多平台兼容.而最重要的是,它为前端工程化提供了最好支持.vue.react等大型 ...
- webpack4 系列教程(七): SCSS提取和懒加载
教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步>>> (原文)webpack4 系列教程(七): SCSS 提取和懒加载. 个人技术小站: https://god ...
- webpack4 系列教程(十五):开发模式与webpack-dev-server
作者按:因为教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步<webpack4 系列教程(十五):开发模式与 webpack-dev-server>原文地址.更欢迎来我的 ...
- CRL快速开发框架系列教程六(分布式缓存解决方案)
本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...
- CRL快速开发框架系列教程三(更新数据)
本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...
- webpack4 系列教程(十三):自动生成HTML文件
作者按:因为教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步<webpack4 系列教程(十三):自动生成 HTML 文件>原文地址.更欢迎来我的小站看更多原创内容:go ...
- webpack4 系列教程(十二):处理第三方JavaScript库
教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步<webpack4 系列教程(十二):处理第三方 JavaScript 库>原文地址.或者来我的小站看更多内容:godbm ...
- webpack4 系列教程(十一):字体文件处理
教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步<webpack4 系列教程(十一):字体文件处理>原文地址.或者来我的小站看更多内容:godbmw.com 0. 课程介 ...
随机推荐
- Authorization Security for Mongodb
To keep security for the mongodb server, we can create an authorized machanism. db.createUser( { use ...
- socketserver实现FTP
功能: 1.用户加密认证 2.允许同时多用户登录 3.每个用户有自己的家目录 ,且只能访问自己的家目录 4.对用户进行磁盘配额,每个用户的可用空间不同 5.允许用户在ftp server上随意切换目录 ...
- Log4Cpp的使用(转)
本文介绍如何使用Log4CPP. Log4Cpp介绍 Log4Cpp的Api接口可以在http://log4cpp.sourceforge.net/api/index.html中查询得到. Log4C ...
- JDK 安装目录中 native2ascii.exe 命令详解
native2ascii 简介 native2ascii 是 sun java sdk提供的一个工具.用来将别的文本类文件(比如*.txt,*.ini,*.properties,*.java等等)编码 ...
- JS应用实例2:轮播图
在学习轮播图之前,要先会切换图片: 找三张图片,命名1.jpg,2.jpg,3.jpg 示例: <!DOCTYPE html> <html> <head> < ...
- python中使用for循环,while循环,一条命令打印99乘法表
用for循环打印九九乘法表: 1 2 3 4 5 6 for i in range (1,10): for j in range(1,10): print(j,"x& ...
- Win10 Hyper-v下虚拟机使用无线网络
首先要承认一点的是写这个随笔更大的初衷是想吐槽,搜了半天,全是一种方法,就是创建一个新的网络适配器,配置为外部网络啥啥啥,用倒是能用,就是网速那叫一个感人,我的是电信百兆光纤网页打开都如蜗牛爬,无法忍 ...
- HoloLens开发手记 - HoloLens shell概述 HoloLens shell overview
使用HoloLens时,shell是由你周围的世界和来自系统的全息图像构成.我们将这种空间成为混合世界(mixed world). shell包含了一个可以让你将全息图像和应用放置在世界中的开始菜单( ...
- requestAnimFrame 动画的使用方法
//requestAnimFrame 封装,可以兼容所有浏览器 window.requestAnimFrame = (function(){ return window.requestAnimatio ...
- Ubuntu 16.04 截图快捷键
一.查看 "截图" 快捷键 打开 "系统设置",点击 "硬件" 下的 "键盘",然后点击 "快捷键" ...