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

CarterLi 发布于2019-08-23 10:49 / 1958人阅读

摘要：文件配置如下多页面应用注意属性其次打包业务中公共代码首先打包中的文件着重来看配置。个人网站原文链接系列教程三多页面解决方案提取公共代码

这节课讲解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代码如下：





  
  
  
  Document

使用 Chrome 或者 Firfox 打开index.html，并且打开控制台即可。

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

云服务器 GPU云服务器 webpack4教程系列三 linux系列教程 php调用公共页面

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96716.html

webpack-demos：全网最贴心webpack系列教程和配套代码

摘要：全网最贴心系列教程和配套代码欢迎关注个人技术博客。所以我花费了个多月整理了这份教程，一共分成节，每节都有讲解，并且准备了配套代码。奈何深感水平不够，只有一腔热情，所以直接开放了教程和源码。 webpack-demos：全网最贴心 webpack 系列教程和配套代码欢迎关注个人技术博客：godbmw.com。每周 1 篇原创技术分享！开源教程(webpack、设计模式）、面试刷题（偏前...

LMou 2019-08-23 12:25 评论0 收藏0
webpack4 系列教程: 前言

摘要：课程地址全部课程地址立即进入课程源码目录截至按照知识点，目录分成了个文件夹之后还会持续更新。个人网站原文链接系列教程前言本文档已经过时，最近内容请看：https://godbmw.com/passage/76。一共16节课程和代码。谢谢支持。 1. 什么是webpack? 前端目前最主流的javascript打包工具，在它的帮助下，开发者可以轻松地实现加密代码、多平台兼容。而最重要的...

DevWiki 2019-08-23 10:25 评论0 收藏0
webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载

摘要：本节课讲解打包单页应用过程中的代码分割和代码懒加载。不同于多页面应用的提取公共代码，单页面的代码分割和懒加载不是通过配置来实现的，而是通过的写法和内置函数实现的。个人网站原文链接系列教程四单页面解决方案代码分割和懒加载本节课讲解webpack4打包单页应用过程中的代码分割和代码懒加载。不同于多页面应用的提取公共代码，单页面的代码分割和懒加载不是通过webpack配置来实现的，而是通过...

jackwang 2019-08-26 12:14 评论0 收藏0
基于webpack4的VUE多页脚手架

摘要：另外备注一部分参数的说明折叠有助于文档树中文本节点的空白区域对进行压缩默认默认按照不同文件的依赖关系来排序。敲黑板讲重点的当然目前这部分的文档在官网还不是很全，所以这里我们参考了印记中文的说明文档，指优化模块。链接写在前面为什么要自己手写一个脚手架？如何去思考遇到的问题？正文链接原文链接 github whale-vue ——写在前面 1、为什么要自己手写...

张金宝 2019-08-23 18:40 评论0 收藏0
webpack4 系列教程(七): SCSS提取和懒加载

摘要：教程所示图片使用的是仓库图片，网速过慢的朋友请移步原文系列教程七提取和懒加载。个人技术小站有空就来看看我一直都在本节课讲解在中的提取和懒加载。值得一提的是，和在的懒加载上的处理方法有着巨大差别。教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步>>> （原文）webpack4 系列教程(七): SCSS 提取和懒加载。个人技术小站: https://godbmw.c...

崔晓明 2019-08-23 11:39 评论0 收藏0