這些屬性之間可以搭配使用，互不沖突。例如 app?_inline&_dist 表示只在生產(chǎn)環(huán)境下才引入該資源，并且需要內(nèi)嵌到 HTML 里去。

WebPlugin 插件還支持一些其它更高級(jí)的用法，詳情可以訪問(wèn)該項(xiàng)目主頁(yè)閱讀文檔。

在開始前先來(lái)看看該應(yīng)用最終發(fā)布到線上的代碼。

構(gòu)建出的目錄結(jié)構(gòu)為：

dist
├── common_029086ff.js
├── common_7cc98ad0.css
├── index.html
├── index_04c08fbf.css
├── index_b3d3761c.js
├── login.html
├── login_0a3feca9.js
└── login_e31e214b.css

如果按照上節(jié)的思路，可能需要為每個(gè)單頁(yè)應(yīng)用配置一段如下代碼：

new WebPlugin({
  template: "./template.html", // HTML 模版文件所在的文件路徑
  filename: "login.html" // 輸出的 HTML 的文件名稱
})

并且把頁(yè)面對(duì)應(yīng)的入口加入到 enrty 配置項(xiàng)中，就像這樣：

entry: {
  index: "./pages/index/index.js",// 頁(yè)面 index.html 的入口文件
  login: "./pages/login/index.js",// 頁(yè)面 login.html 的入口文件
}

當(dāng)有新頁(yè)面加入時(shí)就需要修改 Webpack 配置文件，新插入一段以上代碼，這會(huì)導(dǎo)致構(gòu)建代碼難以維護(hù)而且易錯(cuò)。

項(xiàng)目源碼目錄結(jié)構(gòu)如下：

├── pages
│   ├── index
│   │   ├── index.css // 該頁(yè)面多帶帶需要的 CSS 樣式
│   │   └── index.js // 該頁(yè)面的入口文件
│   └── login
│       ├── index.css
│       └── index.js
├── common.css // 所有頁(yè)面都需要的公共 CSS 樣式
├── google_analytics.js
├── template.html
└── webpack.config.js

從目錄結(jié)構(gòu)中可以看成出下幾點(diǎn)要求：

所有單頁(yè)應(yīng)用的代碼都需要放到一個(gè)目錄下，例如都放在 pages 目錄下；

一個(gè)單頁(yè)應(yīng)用一個(gè)多帶帶的文件夾，例如最后生成的 index.html 相關(guān)的代碼都在 index 目錄下，login.html 同理；

每個(gè)單頁(yè)應(yīng)用的目錄下都有一個(gè) index.js 文件作為入口執(zhí)行文件。

雖然 AutoWebPlugin 強(qiáng)制性的規(guī)定了項(xiàng)目部分的目錄結(jié)構(gòu)，但從實(shí)戰(zhàn)經(jīng)驗(yàn)來(lái)看這是一種優(yōu)雅的目錄規(guī)范，合理的拆分了代碼，又能讓新人快速的看懂項(xiàng)目結(jié)構(gòu)，也方便日后的維護(hù)。

Webpack 配置文件修改如下：

See the Pen webpack管理多個(gè)單頁(yè)應(yīng)用 by whjin (@whjin) on CodePen.

AutoWebPlugin 會(huì)找出 pages 目錄下的2個(gè)文件夾 index 和 login，把這兩個(gè)文件夾看成兩個(gè)單頁(yè)應(yīng)用。 并且分別為每個(gè)單頁(yè)應(yīng)用生成一個(gè) Chunk 配置和 WebPlugin 配置。 每個(gè)單頁(yè)應(yīng)用的 Chunk 名稱就等于文件夾的名稱，也就是說(shuō) autoWebPlugin.entry() 方法返回的內(nèi)容其實(shí)是：

{
  "index":["./pages/index/index.js","./common.css"],
  "login":["./pages/login/index.js","./common.css"]
}

但這些事情 AutoWebPlugin 都會(huì)自動(dòng)為你完成，你不用操心，明白大致原理即可。

template.html 模版文件如下：

由于這個(gè)模版文件被當(dāng)作項(xiàng)目中所有單頁(yè)應(yīng)用的模版，就不能再像上一節(jié)中直接寫 Chunk 的名稱去引入資源，因?yàn)樾枰蛔⑷氲疆?dāng)前頁(yè)面的 Chunk 名稱是不定的，每個(gè)單頁(yè)應(yīng)用都會(huì)有自己的名稱。 和 的作用在于保證該頁(yè)面所依賴的資源都會(huì)被注入到生成的 HTML 模版里去。

web-webpack-plugin 能分析出每個(gè)頁(yè)面依賴哪些資源，例如對(duì)于 login.html 來(lái)說(shuō)，插件可以確定該頁(yè)面依賴以下資源：

所有頁(yè)面都依賴的公共 CSS 代碼 common.css；

所有頁(yè)面都依賴的公共 JavaScrip 代碼 common.js；

只有這個(gè)頁(yè)面依賴的 CSS 代碼 login.css；

只有這個(gè)頁(yè)面依賴的 JavaScrip 代碼 login.css。

由于模版文件 template.html 里沒(méi)有指出引入這些依賴資源的 HTML 語(yǔ)句，插件會(huì)自動(dòng)將沒(méi)有手動(dòng)導(dǎo)入但頁(yè)面依賴的資源按照不同類型注入到 和 所在的位置。

CSS 類型的文件注入到 所在的位置，如果 不存在就注入到 HTML HEAD 標(biāo)簽的最后；

JavaScrip 類型的文件注入到 所在的位置，如果 不存在就注入到 HTML BODY 標(biāo)簽的最后。

如果后續(xù)有新的頁(yè)面需要開發(fā)，只需要在 pages 目錄下新建一個(gè)目錄，目錄名稱取為輸出 HTML 文件的名稱，目錄下放這個(gè)頁(yè)面相關(guān)的代碼即可，無(wú)需改動(dòng)構(gòu)建代碼。

由于 AutoWebPlugin 是間接的通過(guò)上一節(jié)提到的 WebPlugin 實(shí)現(xiàn)的，WebPlugin 支持的功能 AutoWebPlugin 都支持。

同構(gòu)應(yīng)用是指寫一份代碼但可同時(shí)在瀏覽器和服務(wù)器中運(yùn)行的應(yīng)用。

現(xiàn)在大多數(shù)單頁(yè)應(yīng)用的視圖都是通過(guò) JavaScript 代碼在瀏覽器端渲染出來(lái)的，但在瀏覽器端渲染的壞處有：

搜索引擎無(wú)法收錄你的網(wǎng)頁(yè)，因?yàn)檎故境龅臄?shù)據(jù)都是在瀏覽器端異步渲染出來(lái)的，大部分爬蟲無(wú)法獲取到這些數(shù)據(jù)。

對(duì)于復(fù)雜的單頁(yè)應(yīng)用，渲染過(guò)程計(jì)算量大，對(duì)低端移動(dòng)設(shè)備來(lái)說(shuō)可能會(huì)有性能問(wèn)題，用戶能明顯感知到首屏的渲染延遲。

為了解決以上問(wèn)題，有人提出能否將原本只運(yùn)行在瀏覽器中的 JavaScript 渲染代碼也在服務(wù)器端運(yùn)行，在服務(wù)器端渲染出帶內(nèi)容的 HTML 后再返回。 這樣就能讓搜索引擎爬蟲直接抓取到帶數(shù)據(jù)的 HTML，同時(shí)也能降低首屏渲染時(shí)間。 由于 Node.js 的流行和成熟，以及虛擬 DOM 提出與實(shí)現(xiàn)，使這個(gè)假設(shè)成為可能。

實(shí)際上現(xiàn)在主流的前端框架都支持同構(gòu)，包括 React、Vue2、Angular2，其中最先支持也是最成熟的同構(gòu)方案是 React。 由于 React 使用者更多，它們之間又很相似，本節(jié)只介紹如何用 Webpack 構(gòu)建 React 同構(gòu)應(yīng)用。

同構(gòu)應(yīng)用運(yùn)行原理的核心在于虛擬 DOM，虛擬 DOM 的意思是不直接操作 DOM 而是通過(guò) JavaScript Object 去描述原本的 DOM 結(jié)構(gòu)。 在需要更新 DOM 時(shí)不直接操作 DOM 樹，而是通過(guò)更新 JavaScript Object 后再映射成 DOM 操作。

虛擬 DOM 的優(yōu)點(diǎn)在于：

因?yàn)椴僮?DOM 樹是高耗時(shí)的操作，盡量減少 DOM 樹操作能優(yōu)化網(wǎng)頁(yè)性能。而 DOM Diff 算法能找出2個(gè)不同 Object 的最小差異，得出最小 DOM 操作；

虛擬 DOM 的在渲染的時(shí)候不僅僅可以通過(guò)操作 DOM 樹來(lái)表示出結(jié)果，也能有其它的表示方式，例如把虛擬 DOM 渲染成字符串(服務(wù)器端渲染)，或者渲染成手機(jī) App 原生的 UI 組件( React Native)。

以 React 為例，核心模塊 react 負(fù)責(zé)管理 React 組件的生命周期，而具體的渲染工作可以交給 react-dom 模塊來(lái)負(fù)責(zé)。

react-dom 在渲染虛擬 DOM 樹時(shí)有2中方式可選：

通過(guò) render() 函數(shù)去操作瀏覽器 DOM 樹來(lái)展示出結(jié)果。

通過(guò) renderToString() 計(jì)算出表示虛擬 DOM 的 HTML 形式的字符串。

構(gòu)建同構(gòu)應(yīng)用的最終目的是從一份項(xiàng)目源碼中構(gòu)建出2份 JavaScript 代碼，一份用于在瀏覽器端運(yùn)行，一份用于在 Node.js 環(huán)境中運(yùn)行渲染出 HTML。 其中用于在 Node.js 環(huán)境中運(yùn)行的 JavaScript 代碼需要注意以下幾點(diǎn)：

不能包含瀏覽器環(huán)境提供的 API，例如使用 document 進(jìn)行 DOM 操作，因?yàn)?Node.js 不支持這些 API；

不能包含 CSS 代碼，因?yàn)榉?wù)端渲染的目的是渲染出 HTML 內(nèi)容，渲染出 CSS 代碼會(huì)增加額外的計(jì)算量，影響服務(wù)端渲染性能；

不能像用于瀏覽器環(huán)境的輸出代碼那樣把 node_modules 里的第三方模塊和 Node.js 原生模塊(例如 fs 模塊)打包進(jìn)去，而是需要通過(guò) CommonJS 規(guī)范去引入這些模塊。

需要通過(guò) CommonJS 規(guī)范導(dǎo)出一個(gè)渲染函數(shù)，以用于在 HTTP 服務(wù)器中去執(zhí)行這個(gè)渲染函數(shù)，渲染出 HTML 內(nèi)容返回。

用于構(gòu)建瀏覽器環(huán)境代碼的 webpack.config.js 配置文件保留不變，新建一個(gè)專門用于構(gòu)建服務(wù)端渲染代碼的配置文件 webpack_server.config.js，內(nèi)容如下：

const path = require("path");
const nodeExternals = require("webpack-node-externals");

module.exports = {
  // JS 執(zhí)行入口文件
  entry: "./main_server.js",
  // 為了不把 Node.js 內(nèi)置的模塊打包進(jìn)輸出文件中，例如 fs net 模塊等
  target: "node",
  // 為了不把 node_modules 目錄下的第三方模塊打包進(jìn)輸出文件中
  externals: [nodeExternals()],
  output: {
    // 為了以 CommonJS2 規(guī)范導(dǎo)出渲染函數(shù)，以給采用 Node.js 編寫的 HTTP 服務(wù)調(diào)用
    libraryTarget: "commonjs2",
    // 把最終可在 Node.js 中運(yùn)行的代碼輸出到一個(gè) bundle_server.js 文件
    filename: "bundle_server.js",
    // 輸出文件都放到 dist 目錄下
    path: path.resolve(__dirname, "./dist"),
  },
  module: {
    rules: [
      {
        test: /.js$/,
        use: ["babel-loader"],
        exclude: path.resolve(__dirname, "node_modules"),
      },
      {
        // CSS 代碼不能被打包進(jìn)用于服務(wù)端的代碼中去，忽略掉 CSS 文件
        test: /.css/,
        use: ["ignore-loader"],
      },
    ]
  },
  devtool: "source-map" // 輸出 source-map 方便直接調(diào)試 ES6 源碼
};

以上代碼有幾個(gè)關(guān)鍵的地方，分別是：

target: "node" 由于輸出代碼的運(yùn)行環(huán)境是 Node.js，源碼中依賴的 Node.js 原生模塊沒(méi)必要打包進(jìn)去；

externals: [nodeExternals()] webpack-node-externals 的目的是為了防止 node_modules 目錄下的第三方模塊被打包進(jìn)去，因?yàn)?Node.js 默認(rèn)會(huì)去 node_modules 目錄下尋找和使用第三方模塊；

{test: /.css/, use: ["ignore-loader"]} 忽略掉依賴的 CSS 文件，CSS 會(huì)影響服務(wù)端渲染性能，又是做服務(wù)端渲不重要的部分；

libraryTarget: "commonjs2" 以 CommonJS2 規(guī)范導(dǎo)出渲染函數(shù)，以供給采用 Node.js 編寫的 HTTP 服務(wù)器代碼調(diào)用。

為了最大限度的復(fù)用代碼，需要調(diào)整下目錄結(jié)構(gòu)：

把頁(yè)面的根組件放到一個(gè)多帶帶的文件 AppComponent.js，該文件只能包含根組件的代碼，不能包含渲染入口的代碼，而且需要導(dǎo)出根組件以供給渲染入口調(diào)用，AppComponent.js 內(nèi)容如下：

import React, { Component } from "react";
import "./main.css";

export class AppComponent extends Component {
  render() {
    return 
Hello,Webpack
  }
}

分別為不同環(huán)境的渲染入口寫兩份不同的文件，分別是用于瀏覽器端渲染 DOM 的 main_browser.js 文件，和用于服務(wù)端渲染 HTML 字符串的 main_server.js 文件。

main_browser.js 文件內(nèi)容如下：

import React from "react";
import { render } from "react-dom";
import { AppComponent } from "./AppComponent";

// 把根組件渲染到 DOM 樹上
render(, window.document.getElementById("app"));

main_server.js 文件內(nèi)容如下：

為了能把渲染的完整 HTML 文件通過(guò) HTTP 服務(wù)返回給請(qǐng)求端，還需要通過(guò)用 Node.js 編寫一個(gè) HTTP 服務(wù)器。 由于本節(jié)不專注于將 HTTP 服務(wù)器的實(shí)現(xiàn)，就采用了 ExpressJS 來(lái)實(shí)現(xiàn)，http_server.js 文件內(nèi)容如下：

const express = require("express");
const { render } = require("./dist/bundle_server");
const app = express();

// 調(diào)用構(gòu)建出的 bundle_server.js 中暴露出的渲染函數(shù)，再拼接下 HTML 模版，形成完整的 HTML 文件
app.get("/", function (req, res) {
  res.send(`


  


${render()}




  `);
});

// 其它請(qǐng)求路徑返回對(duì)應(yīng)的本地文件
app.use(express.static("."));

app.listen(3000, function () {
  console.log("app listening on port 3000!")
});

再安裝新引入的第三方依賴：

# 安裝 Webpack 構(gòu)建依賴
npm i -D css-loader style-loader ignore-loader webpack-node-externals
# 安裝 HTTP 服務(wù)器依賴
npm i -S express

以上所有準(zhǔn)備工作已經(jīng)完成，接下來(lái)執(zhí)行構(gòu)建，編譯出目標(biāo)文件：

執(zhí)行命令 webpack --config webpack_server.config.js 構(gòu)建出用于服務(wù)端渲染的 ./dist/bundle_server.js 文件。

執(zhí)行命令 webpack 構(gòu)建出用于瀏覽器環(huán)境運(yùn)行的 ./dist/bundle_browser.js 文件，默認(rèn)的配置文件為 webpack.config.js。

構(gòu)建執(zhí)行完成后，執(zhí)行 node ./http_server.js 啟動(dòng) HTTP 服務(wù)器后，再用瀏覽器去訪問(wèn) http://localhost:3000 就能看到 Hello,Webpack 了。 但是為了驗(yàn)證服務(wù)端渲染的結(jié)果，你需要打開瀏覽器的開發(fā)工具中的網(wǎng)絡(luò)抓包一欄，再重新刷新瀏覽器后，就能抓到請(qǐng)求 HTML 的包了，抓包效果圖如下：

可以看到服務(wù)器返回的是渲染出內(nèi)容后的 HTML 而不是 HTML 模版，這說(shuō)明同構(gòu)應(yīng)用的改造完成。

本實(shí)例提供項(xiàng)目完整代碼

Electron 是 Node.js 和 Chromium 瀏覽器的結(jié)合體，用 Chromium 瀏覽器顯示出的 Web 頁(yè)面作為應(yīng)用的 GUI，通過(guò) Node.js 去和操作系統(tǒng)交互。 當(dāng)你在 Electron 應(yīng)用中的一個(gè)窗口操作時(shí)，實(shí)際上是在操作一個(gè)網(wǎng)頁(yè)。當(dāng)你的操作需要通過(guò)操作系統(tǒng)去完成時(shí)，網(wǎng)頁(yè)會(huì)通過(guò) Node.js 去和操作系統(tǒng)交互。

采用這種方式開發(fā)桌面端應(yīng)用的優(yōu)點(diǎn)有：

降低開發(fā)門檻，只需掌握網(wǎng)頁(yè)開發(fā)技術(shù)和 Node.js 即可，大量的 Web 開發(fā)技術(shù)和現(xiàn)成庫(kù)可以復(fù)用于 Electron；

由于 Chromium 瀏覽器和 Node.js 都是跨平臺(tái)的，Electron 能做到寫一份代碼在不同的操作系統(tǒng)運(yùn)行。

在運(yùn)行 Electron 應(yīng)用時(shí)，會(huì)從啟動(dòng)一個(gè)主進(jìn)程開始。主進(jìn)程的啟動(dòng)是通過(guò) Node.js 去執(zhí)行一個(gè)入口 JavaScript 文件實(shí)現(xiàn)的，這個(gè)入口文件 main.js 內(nèi)容如下：

See the Pen Electron-main.js by whjin (@whjin) on CodePen.

主進(jìn)程啟動(dòng)后會(huì)一直駐留在后臺(tái)運(yùn)行，你眼睛所看得的和操作的窗口并不是主進(jìn)程，而是由主進(jìn)程新啟動(dòng)的窗口子進(jìn)程。

應(yīng)用從啟動(dòng)到退出有一系列生命周期事件，通過(guò) electron.app.on() 函數(shù)去監(jiān)聽生命周期事件，在特定的時(shí)刻做出反應(yīng)。 例如在 app.on("ready") 事件中通過(guò) BrowserWindow 去展示應(yīng)用的主窗口。

啟動(dòng)的窗口其實(shí)是一個(gè)網(wǎng)頁(yè)，啟動(dòng)時(shí)會(huì)去加載在 loadURL 中傳入的網(wǎng)頁(yè)地址。 每個(gè)窗口都是一個(gè)多帶帶的網(wǎng)頁(yè)進(jìn)程，窗口之間的通信需要借助主進(jìn)程傳遞消息。

總體來(lái)說(shuō)開發(fā) Electron 應(yīng)用和開發(fā) Web 應(yīng)用很相似，區(qū)別在于 Electron 的運(yùn)行環(huán)境同時(shí)內(nèi)置了瀏覽器和 Node.js 的 API，在開發(fā)網(wǎng)頁(yè)時(shí)除了可以使用瀏覽器提供的 API 外，還可以使用 Node.js 提供的 API。

接下來(lái)做一個(gè)簡(jiǎn)單的 Electron 應(yīng)用，要求為應(yīng)用啟動(dòng)后顯示一個(gè)主窗口，在主窗口里有一個(gè)按鈕，點(diǎn)擊這個(gè)按鈕后新顯示一個(gè)窗口，且使用 React 開發(fā)網(wǎng)頁(yè)。

由于 Electron 應(yīng)用中的每一個(gè)窗口對(duì)應(yīng)一個(gè)網(wǎng)頁(yè)，所以需要開發(fā)2個(gè)網(wǎng)頁(yè)，分別是主窗口的 index.html 和新打開的窗口 login.html。

需要改動(dòng)的地方如下：

在項(xiàng)目根目錄下新建主進(jìn)程的入口文件 main.js，內(nèi)容和上面提到的一致；

主窗口網(wǎng)頁(yè)的代碼如下：

import React, { Component } from "react";
import { render } from "react-dom";
import { remote } from "electron";
import path from "path";
import "./index.css";

class App extends Component {

  // 在按鈕被點(diǎn)擊時(shí)
  handleBtnClick() {
    // 新窗口對(duì)應(yīng)的頁(yè)面的 URI 地址
    const modalPath = path.join("file://", remote.app.getAppPath(), "dist/login.html");
    // 新窗口的大小
    let win = new remote.BrowserWindow({ width: 400, height: 320 })
    win.on("close", function () {
      // 窗口被關(guān)閉時(shí)清空資源
      win = null
    })
    // 加載網(wǎng)頁(yè)
    win.loadURL(modalPath)
    // 顯示窗口
    win.show()
  }
  
  render() {
    return (
      

        
Page Index
        Open Page Login
      
    )
  }
}

render(, window.document.getElementById("app"));

其中最關(guān)鍵的部分在于在按鈕點(diǎn)擊事件里通過(guò) electron 庫(kù)里提供的 API 去新打開一個(gè)窗口，并加載網(wǎng)頁(yè)文件所在的地址。

頁(yè)面部分的代碼已經(jīng)修改完成，接下來(lái)修改構(gòu)建方面的代碼。 這里構(gòu)建需要做到以下幾點(diǎn)：

構(gòu)建出2個(gè)可在瀏覽器里運(yùn)行的網(wǎng)頁(yè)，分別對(duì)應(yīng)2個(gè)窗口的界面；

由于在網(wǎng)頁(yè)的 JavaScript 代碼里可能會(huì)有調(diào)用 Node.js 原生模塊或者 electron 模塊，也就是輸出的代碼依賴這些模塊。但由于這些模塊都是內(nèi)置支持的，構(gòu)建出的代碼不能把這些模塊打包進(jìn)去。

要完成以上要求非常簡(jiǎn)單，因?yàn)?Webpack 內(nèi)置了對(duì) Electron 的支持。 只需要給 Webpack 配置文件加上一行代碼即可，如下：

target: "electron-renderer",

以上修改都完成后重新執(zhí)行 Webpack 構(gòu)建，對(duì)應(yīng)的網(wǎng)頁(yè)需要的代碼都輸出到了項(xiàng)目根目錄下的 dist 目錄里。

為了以 Electron 應(yīng)用的形式運(yùn)行，還需要安裝新依賴：

# 安裝 Electron 執(zhí)行環(huán)境到項(xiàng)目中
npm i -D electron

發(fā)布到 Npm 倉(cāng)庫(kù)的模塊有以下幾個(gè)特點(diǎn)：

每個(gè)模塊根目錄下都必須有一個(gè)描述該模塊的 package.json 文件。該文件描述了模塊的入口文件是哪個(gè)，該模塊又依賴哪些模塊等。

模塊中的文件以 JavaScript 文件為主，但不限于 JavaScript 文件。例如一個(gè) UI 組件模塊可能同時(shí)需要 JavaScript、CSS、圖片文件等。

模塊中的代碼大多采用模塊化規(guī)范，因?yàn)槟愕倪@個(gè)模塊可能依賴其它模塊，而且別的模塊又可能依賴你的這個(gè)模塊。因?yàn)槟壳爸С直容^廣泛的是 CommonJS 模塊化規(guī)范，上傳到 Npm 倉(cāng)庫(kù)的代碼最好遵守該規(guī)范。

Webpack 不僅可用于構(gòu)建運(yùn)行的應(yīng)用，也可用于構(gòu)建上傳到 Npm 的模塊。 接下來(lái)用教大家如何用 Webpack 構(gòu)建一個(gè)可上傳的 Npm 倉(cāng)庫(kù)的 React 組件，具體要求如下：

源代碼采用 ES6 寫，但發(fā)布到 Npm 倉(cāng)庫(kù)的需要是 ES5 的，并且遵守 CommonJS 模塊化規(guī)范。如果發(fā)布到 Npm 上去的 ES5 代碼是經(jīng)過(guò)轉(zhuǎn)換的，請(qǐng)同時(shí)提供 Source Map 以方便調(diào)試。

該 UI 組件依賴的其它資源文件例如 CSS 文件也需要包含在發(fā)布的模塊里。

盡量減少冗余代碼，減少發(fā)布出去的組件的代碼文件大小。

發(fā)布出去的組件的代碼中不能含有其依賴的模塊的代碼，而是讓用戶可選擇性的去安裝。例如不能內(nèi)嵌 React 庫(kù)的代碼，這樣做的目的是在其它組件也依賴 React 庫(kù)時(shí)，防止 React 庫(kù)的代碼被重復(fù)打包。

在開始前先看下最終發(fā)布到 Npm 倉(cāng)庫(kù)的模塊的目錄結(jié)構(gòu)：

node_modules/hello-webpack
├── lib
│   ├── index.css (組件所有依賴的 CSS 都在這個(gè)文件中)
│   ├── index.css.map
│   ├── index.js (符合 CommonJS 模塊化規(guī)范的 ES5 代碼)
│   └── index.js.map
├── src (ES6 源碼)
│   ├── index.css
│   └── index.js
└── package.json (模塊描述文件)

src/index.js 文件，內(nèi)容如下：

import React, { Component } from "react";
import "./index.css";

// 導(dǎo)出該組件供給其它模塊使用
export default class HelloWebpack extends Component {
  render() {
    return 
Hello,Webpack
  }
}

要使用該模塊時(shí)只需要這樣：

// 通過(guò) ES6 語(yǔ)法導(dǎo)入
import HelloWebpack from "hello-webpack";
import "hello-webpack/lib/index.css";

// 或者通過(guò) ES5 語(yǔ)法導(dǎo)入
var HelloWebpack = require("hello-webpack");
require("hello-webpack/lib/index.css");

// 使用 react-dom 渲染
render();

對(duì)于要求1，可以這樣做到：

使用 babel-loader 把 ES6 代碼轉(zhuǎn)換成 ES5 的代碼。

通過(guò)開啟 devtool: "source-map" 輸出 Source Map 以發(fā)布調(diào)試。

設(shè)置 output.libraryTarget="commonjs2" 使輸出的代碼符合CommonJS2 模塊化規(guī)范，以供給其它模塊導(dǎo)入使用。

相關(guān)的 Webpack 配置代碼如下：

module.exports = {
  output: {
    // 輸出的代碼符合 CommonJS 模塊化規(guī)范，以供給其它模塊導(dǎo)入使用。
    libraryTarget: "commonjs2",
  },
  // 輸出 Source Map
  devtool: "source-map",
};

對(duì)于要求2，需要通過(guò) css-loader 和 extract-text-webpack-plugin 實(shí)現(xiàn)，相關(guān)的 Webpack 配置代碼如下：

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        // 增加對(duì) CSS 文件的支持
        test: /.css/,
        // 提取出 Chunk 中的 CSS 代碼到多帶帶的文件中
        use: ExtractTextPlugin.extract({
          use: ["css-loader"]
        }),
      },
    ]
  },
  plugins: [
    new ExtractTextPlugin({
      // 輸出的 CSS 文件名稱
      filename: "index.css",
    }),
  ],
};

此步引入了3個(gè)新依賴：

# 安裝 Webpack 構(gòu)建所需要的新依賴
npm i -D style-loader css-loader extract-text-webpack-plugin

對(duì)于要求3，需要注意的是 Babel 在把 ES6 代碼轉(zhuǎn)換成 ES5 代碼時(shí)會(huì)注入一些輔助函數(shù)。

例如下面這段 ES6 代碼：

class HelloWebpack extends Component{
}

在被轉(zhuǎn)換成能正常運(yùn)行的 ES5 代碼時(shí)需要以下2個(gè)輔助函數(shù)：

babel-runtime/helpers/createClass 用于實(shí)現(xiàn) class 語(yǔ)法

babel-runtime/helpers/inherits 用于實(shí)現(xiàn) extends 語(yǔ)法

默認(rèn)的情況下 Babel 會(huì)在每個(gè)輸出文件中內(nèi)嵌這些依賴的輔助函數(shù)的代碼，如果多個(gè)源代碼文件都依賴這些輔助函數(shù)，那么這些輔助函數(shù)的代碼將會(huì)重復(fù)的出現(xiàn)很多次，造成代碼冗余。

為了不讓這些輔助函數(shù)的代重復(fù)出現(xiàn)，可以在依賴它們的時(shí)候通過(guò) require("babel-runtime/helpers/createClass") 的方式去導(dǎo)入，這樣就能做到只讓它們出現(xiàn)一次。 babel-plugin-transform-runtime 插件就是用來(lái)做這個(gè)事情的。

修改 .babelrc 文件，為其加入 transform-runtime 插件：

{
  "plugins": [
    [
      "transform-runtime",
      {
        // transform-runtime 默認(rèn)會(huì)自動(dòng)的為你使用的 ES6 API 注入 polyfill
        // 假如你在源碼中使用了 Promise，輸出的代碼將會(huì)自動(dòng)注入 require("babel-runtime/core-js/Promise") 語(yǔ)句
        // polyfill 的注入應(yīng)該交給模塊使用者，因?yàn)槭褂谜呖赡茉谄渌胤揭呀?jīng)注入了其它的 Promise polyfill 庫(kù)
        // 所以關(guān)閉該功能
        "polyfill": false
      }
    ]
  ]
}

由于加入 babel-plugin-transform-runtime 后生成的代碼中會(huì)大量出現(xiàn)類似 require("babel-runtime/helpers/createClass") 這樣的語(yǔ)句，所以輸出的代碼將依賴 babel-runtime 模塊。

此步引入了3個(gè)新依賴：

# 安裝 Webpack 構(gòu)建所需要的新依賴
npm i -D babel-plugin-transform-runtime
# 安裝輸出代碼運(yùn)行時(shí)所需的新依賴
npm i -S babel-runtime

對(duì)于要求4，需要通過(guò)在 其它配置項(xiàng) 中介紹過(guò)的 Externals 來(lái)實(shí)現(xiàn)。

Externals 用來(lái)告訴 Webpack 要構(gòu)建的代碼中使用了哪些不用被打包的模塊，也就是說(shuō)這些模版是外部環(huán)境提供的，Webpack 在打包時(shí)可以忽略它們。

相關(guān)的 Webpack 配置代碼如下：

module.exports = {
  // 通過(guò)正則命中所有以 react 或者 babel-runtime 開頭的模塊
  // 這些模塊通過(guò)注冊(cè)在運(yùn)行環(huán)境中的全局變量訪問(wèn)，不用被重復(fù)打包進(jìn)輸出的代碼里
  externals: /^(react|babel-runtime)/,
};

開啟以上配置后，輸出的代碼中會(huì)存在導(dǎo)入 react 或者 babel-runtime 模塊的代碼，但是它們的 react 或者 babel-runtime 的內(nèi)容不會(huì)被包含進(jìn)去，如下：

[
    (function (module, exports) {
        module.exports = require("babel-runtime/helpers/inherits");
    }),
    (function (module, exports) {
        module.exports = require("react");
    })
]

這樣就做到了在保持代碼正確性的情況下，輸出文件不存放 react 或者 babel-runtime 模塊的代碼。

實(shí)際上當(dāng)你在開發(fā) Npm 模塊時(shí)，不只需要對(duì) react 和 babel-runtime 模塊做這樣的處理，而是需要對(duì)所有正在開發(fā)的模塊所依賴的模塊進(jìn)行這樣的處理。 因?yàn)檎陂_發(fā)的模塊所依賴的模塊也可能被其它模塊所依賴。 當(dāng)一個(gè)項(xiàng)目中一個(gè)模塊被依賴多次時(shí)，Webpack 只會(huì)將其打包一次。

完成以上4步后最終的 Webpack 完整配置代碼如下：

const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  // 模塊的入口文件
  entry: "./src/index.js",
  output: {
    // 輸出文件的名稱
    filename: "index.js",
    // 輸出文件的存放目錄
    path: path.resolve(__dirname, "lib"),
    // 輸出的代碼符合 CommonJS 模塊化規(guī)范，以供給其它模塊導(dǎo)入使用。
    libraryTarget: "commonjs2",
  },
  // 通過(guò)正則命中所有以 react 或者 babel-runtime 開頭的模塊，
  // 這些模塊使用外部的，不能被打包進(jìn)輸出的代碼里，防止它們出現(xiàn)多次。
  externals: /^(react|babel-runtime)/,
  module: {
    rules: [
      {
        test: /.js$/,
        use: ["babel-loader"],
        // 排除 node_modules 目錄下的文件，
        // node_modules 目錄下的文件都是采用的 ES5 語(yǔ)法，沒(méi)必要再通過(guò) Babel 去轉(zhuǎn)換。
        exclude: path.resolve(__dirname, "node_modules"),
      },
      {
        // 增加對(duì) CSS 文件的支持
        test: /.css/,
        // 提取出 Chunk 中的 CSS 代碼到多帶帶的文件中
        use: ExtractTextPlugin.extract({
          use: ["css-loader"]
        }),
      },
    ]
  },
  plugins: [
    new ExtractTextPlugin({
      // 輸出的 CSS 文件名稱
      filename: "index.css",
    }),
  ],
  // 輸出 Source Map
  devtool: "source-map",
};

重新執(zhí)行構(gòu)建后，你將會(huì)在項(xiàng)目目錄下看到一個(gè)新目錄 lib，里面放著要發(fā)布到 Npm 倉(cāng)庫(kù)的最終代碼。

在把構(gòu)建出的代碼發(fā)布到 Npm 倉(cāng)庫(kù)前，還需要確保你的模塊描述文件 package.json 是正確配置的。

由于構(gòu)建出的代碼的入口文件是 ./lib/index.js，需要修改 package.json 中的 main 字段如下：

{
  "main": "lib/index.js",
  "jsnext:main": "src/index.js"
}

其中 jsnext:main 字段用于指出采用 ES6 編寫的模塊入口文件所在的位置。

修改完畢后在項(xiàng)目目錄下執(zhí)行 npm publish 就能把構(gòu)建出的代碼發(fā)布到 Npm 倉(cāng)庫(kù)中(確保已經(jīng) npm login 過(guò))。

如果你想讓發(fā)布到 Npm 上去的代碼保持和源碼的目錄結(jié)構(gòu)一致，那么用 Webpack 將不在適合。 因?yàn)樵创a是一個(gè)個(gè)分割的模塊化文件，而 Webpack 會(huì)把這些模塊組合在一起。 雖然 Webpack 輸出的文件也可以是采用 CommonJS 模塊化語(yǔ)法的，但在有些場(chǎng)景下把所有模塊打包成一個(gè)文件發(fā)布到 Npm 是不適合的。 例如像 Lodash 這樣的工具函數(shù)庫(kù)在項(xiàng)目中可能只用到了其中幾個(gè)工具函數(shù)，如果所有工具函數(shù)打包在一個(gè)文件中，那么所有工具函數(shù)都會(huì)被打包進(jìn)去，而保持模塊文件的獨(dú)立能做到只打包進(jìn)使用到的。 還有就是像 UI 組件庫(kù)這樣由大量獨(dú)立組件組成的庫(kù)也和 Lodash 類似。
所以 Webpack 適合于構(gòu)建完整不可分割的 Npm 模塊。

離線應(yīng)用的核心是離線緩存技術(shù)，歷史上曾先后出現(xiàn)2種離線離線緩存技術(shù)，它們分別是：

AppCache 又叫 Application Cache，目前已經(jīng)從 Web 標(biāo)準(zhǔn)中刪除，請(qǐng)盡量不要使用它。

Service Workers 是目前最新的離線緩存技術(shù)，是 Web Worker 的一部分。 它通過(guò)攔截網(wǎng)絡(luò)請(qǐng)求實(shí)現(xiàn)離線緩存，比 AppCache 更加靈活。它也是構(gòu)建 PWA 應(yīng)用的關(guān)鍵技術(shù)之一。

Service Workers 是一個(gè)在瀏覽器后臺(tái)運(yùn)行的腳本，它生命周期完全獨(dú)立于網(wǎng)頁(yè)。它無(wú)法直接訪問(wèn) DOM，但可以通過(guò) postMessage 接口發(fā)送消息來(lái)和 UI 進(jìn)程通信。 攔截網(wǎng)絡(luò)請(qǐng)求是 Service Workers 的一個(gè)重要功能，通過(guò)它能完成離線緩存、編輯響應(yīng)、過(guò)濾響應(yīng)等功能。

目前 Chrome、Firefox、Opera 都已經(jīng)全面支持 Service Workers，但對(duì)于移動(dòng)端瀏覽器就不太樂(lè)觀了，只有高版本的 Android 支持。 由于 Service Workers 無(wú)法通過(guò)注入 polyfill 去實(shí)現(xiàn)兼容，所以在你打算使用它前請(qǐng)先調(diào)查清楚你的網(wǎng)頁(yè)的運(yùn)行場(chǎng)景。

判斷瀏覽器是否支持 Service Workers 的最簡(jiǎn)單的方法是通過(guò)以下代碼：

// 如果 navigator 對(duì)象上存在 serviceWorker 對(duì)象，就表示支持
if (navigator.serviceWorker) {
  // 通過(guò) navigator.serviceWorker 使用
}

要給網(wǎng)頁(yè)接入 Service Workers，需要在網(wǎng)頁(yè)加載后注冊(cè)一個(gè)描述 Service Workers 邏輯的腳本。 代碼如下：

if (navigator.serviceWorker) {
  window.addEventListener("DOMContentLoaded",function() {
    // 調(diào)用 serviceWorker.register 注冊(cè)，參數(shù) /sw.js 為腳本文件所在的 URL 路徑
      navigator.serviceWorker.register("/sw.js");
  });
}

一旦這個(gè)腳本文件被加載，Service Workers 的安裝就開始了。這個(gè)腳本被安裝到瀏覽器中后，就算用戶關(guān)閉了當(dāng)前網(wǎng)頁(yè)，它仍會(huì)存在。 也就是說(shuō)第一次打開該網(wǎng)頁(yè)時(shí) Service Workers 的邏輯不會(huì)生效，因?yàn)槟_本還沒(méi)有被加載和注冊(cè)，但是以后再次打開該網(wǎng)頁(yè)時(shí)腳本里的邏輯將會(huì)生效。

在 Chrome 中可以通過(guò)打開網(wǎng)址 chrome://inspect/#service-workers 來(lái)查看當(dāng)前瀏覽器中所有注冊(cè)了的 Service Workers。

Service Workers 在注冊(cè)成功后會(huì)在其生命周期中派發(fā)出一些事件，通過(guò)監(jiān)聽對(duì)應(yīng)的事件在特點(diǎn)的時(shí)間節(jié)點(diǎn)上做一些事情。

在 Service Workers 腳本中，引入了新的關(guān)鍵字 self 代表當(dāng)前的 Service Workers 實(shí)例。

在 Service Workers 安裝成功后會(huì)派發(fā)出 install 事件，需要在這個(gè)事件中執(zhí)行緩存資源的邏輯，實(shí)現(xiàn)代碼如下：

// 當(dāng)前緩存版本的唯一標(biāo)識(shí)符，用當(dāng)前時(shí)間代替
var cacheKey = new Date().toISOString();

// 需要被緩存的文件的 URL 列表
var cacheFileList = [
  "/index.html",
  "/app.js",
  "/app.css"
];

// 監(jiān)聽 install 事件
self.addEventListener("install", function (event) {
  // 等待所有資源緩存完成時(shí)，才可以進(jìn)行下一步
  event.waitUntil(
    caches.open(cacheKey).then(function (cache) {
      // 要緩存的文件 URL 列表
      return cache.addAll(cacheFileList);
    })
  );
});

接下來(lái)需要監(jiān)聽網(wǎng)絡(luò)請(qǐng)求事件去攔截請(qǐng)求，復(fù)用緩存，代碼如下：

self.addEventListener("fetch", function(event) {
  event.respondWith(
    // 去緩存中查詢對(duì)應(yīng)的請(qǐng)求
    caches.match(event.request).then(function(response) {
        // 如果命中本地緩存，就直接返回本地的資源
        if (response) {
          return response;
        }
        // 否則就去用 fetch 下載資源
        return fetch(event.request);
      }
    )
  );
});

以上就實(shí)現(xiàn)了離線緩存。

線上的代碼有時(shí)需要更新和重新發(fā)布，如果這個(gè)文件被離線緩存了，那就需要 Service Workers 腳本中有對(duì)應(yīng)的邏輯去更新緩存。 這可以通過(guò)更新 Service Workers 腳本文件做到。

瀏覽器針對(duì) Service Workers 有如下機(jī)制：

每次打開接入了 Service Workers 的網(wǎng)頁(yè)時(shí)，瀏覽器都會(huì)去重新下載 Service Workers 腳本文件（所以要注意該腳本文件不能太大），如果發(fā)現(xiàn)和當(dāng)前已經(jīng)注冊(cè)過(guò)的文件存在字節(jié)差異，就將其視為“新服務(wù)工作線程”。

新 Service Workers 線程將會(huì)啟動(dòng)，且將會(huì)觸發(fā)其 install 事件。

當(dāng)網(wǎng)站上當(dāng)前打開的頁(yè)面關(guān)閉時(shí)，舊 Service Workers 線程將會(huì)被終止，新 Service Workers 線程將會(huì)取得控制權(quán)。

新 Service Workers 線程取得控制權(quán)后，將會(huì)觸發(fā)其 activate 事件。

新 Service Workers 線程中的 activate 事件就是最佳的清理舊緩存的時(shí)間點(diǎn)，