webpack 筆記

webpack 筆記

【 拋出問題：】

一、什麼是webpack？

二、爲何要使用webpack？

三、webpack的優、缺點？如何爲規避這些問題？

四、如何在生產環境中使用？

概念

核心概念：入口（entry）、輸出（output）、loader（）、插件（plugins）

入口(Entry)

單個入口（簡寫）語法

用法： entry: string|Array<string>

對象語法

用法： entry: {[entryChunkName: string]: string|Array<string>} 

常見場景

分離 應用程序(app) 和 第三方庫(vendor) 入口

多頁面應用程序

出口(Output)

  將全部的資源(assets)歸攏在一塊兒後，還須要告訴 webpack 在哪裏打包應用程序。webpack 的 output 屬性描述瞭如何處理歸攏在一塊兒的代碼(bundled code)。 

用法(Usage)

在 webpack 中配置 output 屬性的最低要求是，將它的值設置爲一個對象，包括如下兩點：

• filename 用於輸出文件的文件名。
• 目標輸出目錄 path 的絕對路徑。 

多個入口起點

高級進階

Loader

  webpack 的目標是，讓 webpack 聚焦於項目中的全部資源(asset)，而瀏覽器不須要關注考慮這些（明確的說，這並不意味着全部資源(asset)都必須打包在一塊兒）。webpack 把每一個文件(.css, .html, .scss, .jpg, etc.) 都做爲模塊處理。然而 webpack 只理解 JavaScript。

webpack loader 在文件被添加到依賴圖中時，其轉換爲模塊。

在更高層面，在 webpack 的配置中 loaders 有兩個目標。

一、識別出(identify)應該被對應的 loader 進行轉換(transform)的那些文件。(test 屬性)
二、 轉換這些文件，從而使其可以被添加到依賴圖中（而且最終添加到 bundle 中）(use 屬性)

使用Loader

在你的應用程序中，有三種使用 loader 的方式：

• 配置（推薦）：在 webpack.config.js 文件中指定 loader。
• 內聯：在每一個 import 語句中顯式指定 loader。
• CLI：在 shell 命令中指定它們。

配置[Configuration]

module.rules 容許你在 webpack 配置中指定多個 loader。 這是展現 loader 的一種簡明方式，而且有助於使代碼變得簡潔。同時讓你對各個 loader 有個全局概覽： 

內聯

CLI

Loader 特性

• loader 支持鏈式傳遞。可以對資源使用流水線(pipeline)。一組鏈式的 loader 將按照前後順序進行編譯。loader 鏈中的第一個 loader 返回值給下一個 loader。在最後一個 loader，返回 webpack 所預期的 JavaScript。
• loader 能夠是同步的，也能夠是異步的。
• loader 運行在 Node.js 中，而且可以執行任何可能的操做。
• loader 接收查詢參數。用於對 loader 傳遞配置。
• loader 也可以使用 options 對象進行配置。
• 除了使用 package.json 常見的 main 屬性，還能夠將普通的 npm 模塊導出爲 loader，作法是- - 在 package.json 裏定義一個 loader 字段。
• 插件(plugin)能夠爲 loader 帶來更多特性。
• loader 可以產生額外的任意文件。

loader 遵循標準的模塊解析。多數狀況下，loader 將從模塊路徑（一般將模塊路徑認爲是npm install, node_modules）解析。

插件(Plugins)

  想要使用一個插件，你只須要 require() 它，而後把它添加到 plugins 數組中。多數插件能夠經過選項(option)自定義。你也能夠在一個配置文件中由於不一樣目的而屢次使用同一個插件，這時須要經過使用 new 來建立它的一個實例。 

配置(Configuration)

webpack 的配置文件是 JavaScript 文件導出的一個對象。 此對象，由 webpack 根據對象定義的屬性進行解析。

由於 webpack 配置是標準的 Node.js CommonJS 模塊，你可使用以下特性：

• 經過 require(...) 導入其餘文件
• 經過 require(...) 使用 npm 的工具函數
• 使用 JavaScript 控制流表達式，例如?:操做符
• 對經常使用值使用常量或變量
• 編寫並執行函數來生成部分配置

請在合適的時機使用這些特性。

雖然技術上可行，但應避免如下作法**：

• 在使用 webpack 命令行接口(CLI)（應該編寫本身的命令行接口(CLI)，或使用 --env）時，訪問命令行接口(CLI)參數
• 導出不肯定的值（調用 webpack 兩次應該產生一樣的輸出文件） -編寫很長的配置（應該將配置拆分爲多個文件）

最簡單的配置

模塊(Modules)

什麼是 webpack 模塊

對比 Node.js 模塊，webpack 模塊可以以各類方式表達它們的依賴關係，幾個例子以下：

• ES2015 import 語句
• CommonJS require( ) 語句
• AMD define 和 require 語句
• css/sass/less 文件中的 @import 語句。
• 樣式(url(...))或 HTML 文件(<img src=...>)中的圖片連接(image url)

支持的模塊類型

• CoffeeScript
• TypeScript
• ESNext (Babel)
• Sass
• Less
• Stylus

模塊解析(Module Resolution)

什麼是webpack？

Webpack 是一個模塊打包器。它將根據模塊的依賴關係進行靜態分析，而後將這些模塊按照指定的規則生成對應的靜態資源。

Webpack 有兩種組織模塊依賴的方式

Webpack 有兩種組織模塊依賴的方式，同步和異步。異步依賴做爲分割點，造成一個新的塊。在優化了依賴樹後，每個異步區塊都做爲一個文件被打包。

webpack 如何工做

Loader

Webpack 自己只能處理原生的 JavaScript 模塊，可是 loader 轉換器能夠將各類類型的資源轉換成 JavaScript 模塊。這樣，任何資源均可以成爲 Webpack 能夠處理的模塊。

智能解析

Webpack 有一個智能解析器，幾乎能夠處理任何第三方庫，不管它們的模塊形式是 CommonJS、 AMD 仍是普通的 JS 文件。甚至在加載依賴的時候，容許使用動態表達式 require("./templates/" + name + ".jade")。

插件系統

Webpack 還有一個功能豐富的插件系統。大多數內容功能都是基於這個插件系統運行的，還能夠開發和使用開源的 Webpack 插件，來知足各式各樣的需求

快速運行

Webpack 使用異步 I/O 和多級緩存提升運行效率，這使得 Webpack 可以以使人難以置信的速度快速增量編譯。

安裝使用 webpack

使用npm 安裝 Webpack：

此時 Webpack 已經安裝到了全局環境下，能夠經過命令行 webpack -h 試試。

一般咱們會將 Webpack 安裝到項目的依賴中，這樣就可使用項目本地版本的 Webpack。

配置文件 webpack.config.js

在(所需)根目錄建立 package.json 來添加 webpack 須要的依賴：

運行 npm install，而後建立一個配置文件 webpack.config.js

同時簡化 entry.js 中的 style.css 加載方式：

CommonJS 規範

CommonJS 是以在瀏覽器環境以外構建 JavaScript 生態系統爲目標而產生的項目，好比在服務器和桌面環境中。 這個項目最開始是由 Mozilla 的工程師 Kevin Dangoor 在2009年1月建立的，當時的名字是 ServerJS。

CommonJS 是一套規範。（CommonJS 已通過時，Node.js 的內核開發者已經廢棄了該規範。） CommonJS 規範是爲了解決 JavaScript 的做用域問題而定義的模塊形式，可使每一個模塊它自身的命名空間中執行。該規範的主要內容是，模塊必須經過 module.exports 導出對外的變量或接口，經過 require() 來導入其餘模塊的輸出到當前模塊做用域中。

AMD 規範

AMD（異步模塊定義）是爲瀏覽器環境設計的，由於 CommonJS 模塊系統是同步加載的，當前瀏覽器環境尚未準備好同步加載模塊的條件。

AMD 定義了一套 JavaScript 模塊依賴異步加載標準，來解決同步加載的問題。

模塊經過 define 函數定義在閉包中，格式以下：

[例子：]

定義一個名爲 myModule 的模塊，它依賴 jQuery 模塊：

注意：在 webpack 中，模塊名只有局部做用域，在 Require.js 中模塊名是全局做用域，能夠在全局引用。

定義一個沒有 id 值的匿名模塊，一般做爲應用的啓動函數：

依賴多個模塊的定義：

模塊輸出：

在模塊定義內部引用依賴：