webpack 打包庫爲 js ，讓瀏覽器可直接引用，不依賴node.js 環境。

開導：

有個原生 js 的項目， 由於要使用第三方插件，還只支持 npm 的方式引入（求此處內心陰影面積），不要問爲何只能npm 的方式安裝插件，由於插件自己依賴也不少，因此不支持script，就算支持，也得引入不少東西，還容易引入不須要的依賴（慌！！！），下張圖可能致使不適，請別看。

怎麼解決？

碰見問題怎麼辦，搜搜百度找答案！！ 

就到這裏，再見！！！！

下期見。。。

首先請保證你的電腦有如下條件:  一臺能用的電腦，node.js （npm） 環境,   代碼編輯工具。

我使用的是 yarn ，和 npm 區別不是很大。 

1. 建立一個文件夾。 個人依賴不少。 可是js 文件就1個。 因此我就建立了一個文件夾， 若是js 多的話，也能夠使用開發工具建立空項目。

2. 控制檯執行 yarn init / npm init。 初始化 package.json。 不解釋，大家都懂的。 

3. 控制檯執行 webpack -v ，這裏是檢測你是否安裝了全局 webpack ，安裝了會獲得版本號，未安裝會提示不是可執行命令。 那麼就須要安裝了。

npm install -g webpack // 我不會yarn 安裝全局，沒有掌握這個技能，這裏就不演示 yarn 的安裝方式了）
// 安裝完成後，再執行一下 上面命令，獲得版本號就能夠進行下一步了，
// 這裏安裝完成，可能還須要重啓命令行，未成功請嘗試此操做。複製代碼

4. 安裝你須要的 依賴。【這裏我已個人項目場景演示】

yarn add uuid protobufjs // 安裝完成依賴，就能夠進行你的插件js 編寫了。複製代碼

 

我只使用了這兩個。

5. 新建一個index.js 文件，編寫你的邏輯代碼。下面是個人代碼示例。 

有個坑：導出的插件js 必須 export default ，否則你使用 script 使用時，會獲得 undefined。請注意。

6. 編寫完成，就應該打包了， 建立一個webpack的配置文件，命名爲【webpack.config.js】。

爲了方便理解。 先貼一張項目目錄的圖。

var path = require("path"); // webpack 內部依賴。可無論。
module.exports = {
 entry: {
    index: path.join(__dirname, 'index.js'), // 這裏是入口文件。 可多個引入
    // 多個文件引入示例
    // home: path.join(_dirname, 'home.js')
    // _dirname webpack 全局變量，表明當前項目目錄。
    // 這裏必須使用 webpack 的 path，指定當前目錄 
    // ，否則就會默認讀C 盤根目錄。踩過坑，請注意。
  },
  output: {
    path: path.join(__dirname, '/dist'), // 輸出目錄，使用過vue的 應該很熟悉了。
    filename: 'ImClientService.js', // 輸出文件 名稱
    libraryExport: "default", // 添加這個的意思，標記該js文件可支持 improt 引入。
    // 下面兩個是結合使用的。 
    libraryTarget: "umd"  // 標籤名總4個。詳細文檔參見 【webpck  library 配置文檔】
    // 1. UMD：在 AMD 或 CommonJS require 以後可訪問
    // 2. window：在瀏覽器中經過 window 對象訪問
    // 3. this：經過 this 對象訪問
    // 4. 變量：做爲一個全局變量，經過 script 標籤來訪問
    library: "ImClientService", // 引入全局名稱。 這裏的設置，和script 中的調用名是對應的。
  }
}複製代碼

【 webpack entry 入口文檔】

【webpack output 出口文檔】

【webpck  library 配置文檔】

webpack 的配置就完成了。 如今就能夠輸出庫文件了。 

7. 輸出庫文件

直接調用 webpack 便可， 會在項目目錄的 dist 文件獲得你的庫文件。
一切配置正常，就可獲得下面這些信息。 
下面的提示信息大體就說你沒有指定模式。這裏沒有什麼用，因此我就沒有填寫。複製代碼

8. 如何使用。 

<script type="text/javascript" src="./libs/ImClientService.js"></script> // 直接引入便可複製代碼

chat.js 文件：
let imClientService = new ImClientService('ws://***:**/**', './libs/SVPro.proto');複製代碼

完結, 對你有幫助的話，請點個👍。

打字不易，轉載請註明出處。

若有問題，或者更高級的用法，歡迎一塊兒討論。