配置含義
含義entry
配置模組的入口
output
配置如何輸出最終想要的**
module
配置處理模組的規則
resolve
配置尋找模組的規則
plugins
配置擴充套件外掛程式
devserver
配置 devserver
型別例子
含義string
入口模組的檔案路徑，可以是相對路徑。
array
入口模組的檔案路徑，可以是相對路徑。
object
配置多個入口，每個入口生成乙個 chunk
filename
含義id
chunk 的唯一標識，從0開始
name
chunk 的名稱
hash
chunk 的唯一標識的 hash 值
chunkhash
chunk 內容的 hash 值
// eg
filename:
'[name]_[hash].css'
chunkfilename
path
// eg
path: path.
resolve
(__dirname,
'dist_[hash]'
)
crossoriginloading
use-credentials 在載入此指令碼資源時會帶上使用者的 cookies。
librarytarget 和 library
output.library 配置匯出庫的名稱。
變數名含義
var(預設)
編寫的庫將通過 var 被賦值給通過 library 指定名稱的變數。
commonjs
編寫的庫將通過 commonjs 規範匯出。
commonjs2
編寫的庫將通過 commonjs2 規範匯出，輸出和使用的**如下：
this
編寫的庫將通過 this 被賦值給通過 library 指定的名稱
global
編寫的庫將通過 global 被賦值給通過 library 指定的名稱，即把庫掛載到 global 上
rules
應用規則：對選中後的檔案通過 use 配置項來應用 loader，可以只應用乙個 loader 或者按照從後往前的順序應用一組 loader，同時還可以分別給 loader 傳入引數。
重置順序：一組 loader 的執行順序預設是從右到左執行，通過 enforce 選項可以讓其中乙個 loader 的執行順序放到最前或者最後。
module:,,
,]}
noparse
parser
module:}]
}
作用alias
resolve.alias 配置項通過別名來把原匯入路徑對映成乙個新的匯入路徑
mainfields
webpack 會根據 mainfields 的配置去決定優先採用那份**，mainfields 預設為[『browser』, 『main』]
extensions
webpack 會自動帶上字尾後去嘗試訪問檔案是否存在。 resolve.extensions 用於配置在嘗試過程中用到的字尾列表，預設是：[』.js』, 『.json』]
modules
resolve.modules配置 webpack 去哪些目錄下尋找第三方模組，預設是只會去 node_modules 目錄下尋找
descriptionfiles
resolve.descriptionfiles 配置描述第三方模組的檔名稱，也就是 package.json 檔案
enforceextension
resolve.enforceextension 如果配置為 true 所有匯入語句都必須要帶檔案字尾，
enforcemoduleextension
enforcemoduleextension 和 enforceextension 作用類似，但 enforcemoduleextension 只對 node_modules 下的模組生效。
devserver配置項
作用hot
devserver.hot 配置是否啟用 使用devserver 中的模組熱替換功能
inline
devserver.inline 用於配置是否自動注入這個**客戶端到將執行在頁面裡的 chunk 裡去，預設是會自動注入。
historyapifallback
devserver.historyapifallback 控制返回的路由，用於方便的開發使用了 html5 history api 的單頁應用
contentbase
devserver.contentbase 配置 devserver http 伺服器的檔案根目錄。
headers
devserver.headers 配置項可以在 http 響應中注入一些 http 響應頭
host
devserver.host 配置項用於配置 devserver 服務監聽的位址。
port
adevserver.port 配置項用於配置 devserver 服務監聽的埠，預設使用 8080 埠
allowedhosts
devserver.allowedhosts 配置乙個白名單列表，只有 http 請求的 host 在列表裡才正常返回。
disablehostcheck
devserver.disablehostcheck 配置項用於配置是否關閉用於 dns 重繫結的 http 請求的 host 檢查。 devserver 預設只接受來自本地的請求，關閉後可以接受來自任何 host 的請求。
devserver 預設使用 http 協議服務，它也能通過 https 協議服務。
clientloglevel
devserver.clientloglevel 配置在客戶端的日誌等級，這會影響到你在瀏覽器開發者工具控制台裡看到的日誌內容。 clientloglevel 是列舉型別，可取如下之一的值 none、error、warning、info。 預設為 info 級別
compress
devserver.compress 配置是否啟用 gzip 壓縮。boolean 為型別，預設為 false。
open
devserver.open 用於在 devserver 啟動且第一次構建完時自動用你系統上預設的瀏覽器去開啟要開發的網頁。 同時還提供 devserver.openpage 配置項用於開啟指定 url 的網頁。
深入淺出Webpack
commonjs require 同步載入依賴 module.exports node.js 需通過工具轉為es5 amdasynchronous module definition 非同步載入模組 es6模組化 import xx from export default export 樣式檔案 i...
深入淺出webpack學習 6 Plugin
plugin用於擴充套件webpack功能，各種各樣的plugin幾乎讓webpack可以 做任何構建相關的事情。配置plugin plugin的配置很簡單，plugins配置項接受乙個陣列，陣列裡每一項都是乙個要使用的plugin的例項，plugin需要的引數通過建構函式傳入。const comm...
深入淺出webpack學習 2 Entry
現在介紹一下webpack配置中的entry entry是配置模組的入口，可以抽象成輸入，webpack執行構建的第一步將從入口開始搜尋及遞迴解析出所有入口依賴的模組。注意 entry是必填，若不填寫則將導致webpack報錯退出 webpack在尋找相對路徑的檔案時會以context為根目錄，co...