webpack4 系列教程(三): 多頁面解決方案--提取公共代碼

時間 2019-11-19

標籤 webpack4 webpack 系列教程頁面解決方案提取公共代碼简体版

原文原文鏈接

這節課講解webpack4打包多頁面應用過程當中的提取公共代碼部分。相比於webpack3，4.0版本用optimization.splitChunks配置替換了3.0版本的CommonsChunkPlugin插件。在使用和配置上，更加方便和清晰。javascript

>>> 本節課源碼html

>>> 全部課程源碼java

1. 準備工做

按照慣例，咱們在src/文件夾下建立pageA.js和pageB.js分別做爲兩個入口文件。同時，這兩個入口文件同時引用subPageA.js和subPageB.js，而subPageA.js和subPageB.js又同時引用module.js文件。node

代碼目錄結構以下圖所示：webpack

但願你們理清邏輯關係，下面從底層往上層進行代碼書寫。git

module.js:github

export default "module";

subPageA.js:web

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

subPageB.js:npm

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

正如咱們所見，subPageA.js和subPageB.js同時引用module.js。json

最後，咱們封裝入口文件。而爲了讓狀況更真實，這兩個入口文件又同時引用了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，而且打開控制檯便可。