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

CarterLi 發布于2019-08-23 10:49 / 2013人閱讀

摘要：文件配置如下多頁面應用注意屬性其次打包業務中公共代碼首先打包中的文件著重來看配置。個人網站原文鏈接系列教程三多頁面解決方案提取公共代碼

這節課講解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調用公共頁面

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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