东莞市盛裕绒艺玩具有限公司

东莞市盛裕绒艺玩具有限公司

星投娱乐最新客服

13697664217
联系方式
全国服务热线: 13697664217

咨询热线:15565668898
联系人:潜龙军
地址:西藏自治省拉萨市色拉路第六安居园

webpack4 系列教程(三): 多页面解决方案--提取公共代码

来源:星投娱乐最新客服   发布时间:2019-11-09   点击量:484

这节课讲解webpack4打包多页面应用过程中的提取公共代码部分。相比于webpack34.0版本用optimization.splitChunks配置替换了3.0版本的CommonsChunkPlugin插件。在使用和配置上,更加方便和清晰。

>>> 本节课源码

>>> 所有课程源码

1. 准备工作

按照惯例,我们在src/文件夹下创建pageA.jspageB.js分别作为两个入口文件。同时,这两个入口文件同时引用subPageA.jssubPageB.js,而subPageA.jssubPageB.js又同时引用module.js文件。

代码目录结构如下图所示:

希望大家理清逻辑关系,下面从底层往上层进行代码书写。

module.js:

export default "module";

subPageA.js:

import "./module";export default "subPageA";

subPageB.js:

import "./module";export default "subPageB";

正如我们所见,subPageA.jssubPageB.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属性中。

其中,每个键对值就是被打包的一部分。例如代码中的commonvendor。值得注意的是,针对第三方库(例如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,并且打开控制台即可。


欢迎技术交流,引用请注明出处。个人网站:Yuan Xin原文链接:webpack4 系列教程(三): 多页面解决方案--提取公共代码

相关产品

COPYRIGHTS©2017 星投娱乐最新客服 ALL RIGHTS RESERVED 备案号:484