webpack入門總結

官網：https://www.webpackjs.com/

核心原理

• 一切皆模塊
• 按需加載

概念

module

具備必定功能的模塊。

bundle

打包後的文件。

chunk

打包過程分割的代碼塊。

關於webpack的理解

能夠從如下幾個方面來理解webpack:

1. 文件處理與編譯
2. 開發環境
3. 打包優化
4. 框架配合

webpack核心概念

Entry

Webpack 會遞歸的探索出 入口文件中所依賴的模塊，並按照順序 利用 Loader 進行處理。

單入口

1.string

entry: "app.js";

多入口

1.Array<string>
數組中的每一項都會被打包，造成互不依賴的文件

entry: ["app.js","main.js"];

2.object

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

對象中的每個屬性都會被打包，造成互不依賴的文件

entry: {
  index:['index.js','app.js'],
  vendor: 'vendor.js'
}

Output

便是你配置了多個入口文件，你也只能有一個輸出點。

path

輸出文件的目錄。

絕對路徑

filename

輸出的文件名，它通常跟你entry配置相呼應。

單入口

• 自定義

filename: "[name].bundle.js"

多入口

• [name].js
• [id].js, 使用內部 chunk id
• [hash].js, 使用每次構建過程當中，惟一的 hash 生成

在項目中任何一個文件改動後就會被從新建立，而後webpack計算新的hash值

• [chunkhash].js, 使用基於每一個 chunk 內容的 hash

publicPath

靜態資源服務器訪問路徑，以index.html的路徑爲基準。

靜態資源最終訪問路徑 = output.publicPath + 資源loader或插件等配置路徑

publicPath 應該以/結尾，同時其它 loader 或插件的配置不能以/開頭

chunkFilename

配置了它，爲非入口entry的模塊命名，能夠理解爲須要被打包出來的文件命名。

以path路徑爲基準

chunkFilename - filename

異步模塊: chunkFilename 
同步模塊：filename

resolve

配置模塊如何解析。

extensions：自動解析肯定的擴展,省去你引入組件時寫後綴的麻煩
alias：很是重要的一個配置，它能夠配置一些短路徑

module

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

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

module.rules - 編譯規則

rules：也就是以前的loaderstest ： 正則表達式，匹配編譯的文件exclude：排除特定條件，如一般會寫node_modules，即把某些目錄/文件過濾掉include：它正好與exclude相反