webpack3+php方案,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代码如下：

Document

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