国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

CarterLi / 2020人閱讀

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

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

>>> 本節(jié)課源碼

>>> 所有課程源碼

1. 準(zhǔn)備工作

按照慣例，我們在src/文件夾下創(chuàng)建pageA.js和pageB.js分別作為兩個(gè)入口文件。同時(shí)，這兩個(gè)入口文件同時(shí)引用subPageA.js和subPageB.js，而subPageA.js和subPageB.js又同時(shí)引用module.js文件。

代碼目錄結(jié)構(gòu)如下圖所示：

希望大家理清邏輯關(guān)系，下面從底層往上層進(jìn)行代碼書寫。

module.js:

export default "module";

subPageA.js:

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

subPageB.js:

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

正如我們所見，subPageA.js和subPageB.js同時(shí)引用module.js。

最后，我們封裝入口文件。而為了讓情況更真實(shí)，這兩個(gè)入口文件又同時(shí)引用了lodash這個(gè)第三方庫。

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";

好了，到此為止，需要編寫的代碼已經(jīng)完成了。>>> src 文件夾項(xiàng)目源碼

2. 編寫webpack配置文件

首先我們應(yīng)該安裝先關(guān)的庫，創(chuàng)建package.json，輸入以下內(nèi)容：

{
  "devDependencies": {
    "webpack": "^4.15.1"
  },
  "dependencies": {
    "lodash": "^4.17.10"
  }
}

在命令行中運(yùn)行npm install即可。

然后配置webpack.config.js文件。文件配置如下：

const webpack = require("webpack");
const path = require("path");

module.exports = {
  // 多頁面應(yīng)用
  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屬性
        // 其次: 打包業(yè)務(wù)中公共代碼
        common: {
          name: "common",
          chunks: "all",
          minSize: 1,
          priority: 0
        },
        // 首先: 打包node_modules中的文件
        vendor: {
          name: "vendor",
          test: /[/]node_modules[/]/,
          chunks: "all",
          priority: 10
        }
      }
    }
  }
};

著重來看optimization.splitChunks配置。我們將需要打包的代碼放在cacheGroups屬性中。

其中，每個(gè)鍵對值就是被打包的一部分。例如代碼中的common和vendor。值得注意的是，針對第三方庫（例如lodash）通過設(shè)置priority來讓其先被打包提取，最后再提取剩余代碼。

所以，上述配置中公共代碼的提取順序其實(shí)是：

... ...
vendor: {
  name: "vendor",
  test: /[/]node_modules[/]/,
  chunks: "all",
  priority: 10
},
common: {
    name: "common",
    chunks: "all",
    minSize: 1,
    priority: 0
}
... ...
3. 打包和引用

命令行中運(yùn)行webpack即可打包。可以看到，我們成功提取了公共代碼，如下圖所示：

最后，打包的結(jié)果在dist/文件夾下面，我們要在index.html中引用打包好的js文件,index.html代碼如下：





  
  
  
  Document

使用 Chrome 或者 Firfox 打開index.html，并且打開控制臺(tái)即可。

歡迎技術(shù)交流，引用請注明出處。
個(gè)人網(wǎng)站：GodBMW.com
原文鏈接：webpack4 系列教程(三): 多頁面解決方案--提取公共代碼

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/96716.html

相關(guān)文章

  • webpack-demos：全網(wǎng)最貼心webpack系列教程和配套代碼

    摘要：全網(wǎng)最貼心系列教程和配套代碼歡迎關(guān)注個(gè)人技術(shù)博客。所以我花費(fèi)了個(gè)多月整理了這份教程，一共分成節(jié)，每節(jié)都有講解，并且準(zhǔn)備了配套代碼。奈何深感水平不夠，只有一腔熱情，所以直接開放了教程和源碼。 webpack-demos：全網(wǎng)最貼心 webpack 系列教程和配套代碼 歡迎關(guān)注個(gè)人技術(shù)博客：godbmw.com。每周 1 篇原創(chuàng)技術(shù)分享！開源教程(webpack、設(shè)計(jì)模式）、面試刷題（偏前...

    LMou 評論0 收藏0

  • webpack4 系列教程: 前言

    摘要：課程地址全部課程地址立即進(jìn)入課程源碼目錄截至按照知識點(diǎn)，目錄分成了個(gè)文件夾之后還會(huì)持續(xù)更新。個(gè)人網(wǎng)站原文鏈接系列教程前言 本文檔已經(jīng)過時(shí)，最近內(nèi)容請看：https://godbmw.com/passage/76。一共16節(jié)課程和代碼。謝謝支持。 1. 什么是webpack? 前端目前最主流的javascript打包工具，在它的幫助下，開發(fā)者可以輕松地實(shí)現(xiàn)加密代碼、多平臺(tái)兼容。而最重要的...

    DevWiki 評論0 收藏0

  • webpack4 系列教程(四): 單頁面解決方案--代碼分割和懶加載

    摘要：本節(jié)課講解打包單頁應(yīng)用過程中的代碼分割和代碼懶加載。不同于多頁面應(yīng)用的提取公共代碼，單頁面的代碼分割和懶加載不是通過配置來實(shí)現(xiàn)的，而是通過的寫法和內(nèi)置函數(shù)實(shí)現(xiàn)的。個(gè)人網(wǎng)站原文鏈接系列教程四單頁面解決方案代碼分割和懶加載 本節(jié)課講解webpack4打包單頁應(yīng)用過程中的代碼分割和代碼懶加載。不同于多頁面應(yīng)用的提取公共代碼，單頁面的代碼分割和懶加載不是通過webpack配置來實(shí)現(xiàn)的，而是通過...

    jackwang 評論0 收藏0

  • 基于webpack4的VUE多頁腳手架

    摘要：另外備注一部分參數(shù)的說明折疊有助于文檔樹中文本節(jié)點(diǎn)的空白區(qū)域?qū)M(jìn)行壓縮默認(rèn)默認(rèn)按照不同文件的依賴關(guān)系來排序。敲黑板講重點(diǎn)的當(dāng)然目前這部分的文檔在官網(wǎng)還不是很全，所以這里我們參考了印記中文的說明文檔，指優(yōu)化模塊。 鏈接 寫在前面 為什么要自己手寫一個(gè)腳手架？ 如何去思考遇到的問題？ 正文 鏈接 原文鏈接 github whale-vue ——寫在前面 1、為什么要自己手寫...

    張金寶 評論0 收藏0

  • webpack4 系列教程(七): SCSS提取和懶加載

    摘要：教程所示圖片使用的是倉庫圖片，網(wǎng)速過慢的朋友請移步原文系列教程七提取和懶加載。個(gè)人技術(shù)小站有空就來看看我一直都在本節(jié)課講解在中的提取和懶加載。值得一提的是，和在的懶加載上的處理方法有著巨大差別。 教程所示圖片使用的是 github 倉庫圖片，網(wǎng)速過慢的朋友請移步>>> （原文）webpack4 系列教程(七): SCSS 提取和懶加載。 個(gè)人技術(shù)小站: https://godbmw.c...

    崔曉明 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<