深入淺出webpack學習 6 Plugin

2021-09-14 01:15:26 字數 429 閱讀 7845

plugin用於擴充套件webpack功能,各種各樣的plugin幾乎讓webpack可以 做任何構建相關的事情。

配置plugin

plugin的配置很簡單,plugins配置項接受乙個陣列,陣列裡每一項都是乙個要使用的plugin的例項,plugin需要的引數通過建構函式傳入。

const commonschunkplugin = require('webpack/lib/optimize/commonschunkplugin')

module.exports = )

]}

使用plugin的難點在於掌握plugin本身提供的配置項,而不是如何在webpack中接入plugin。幾乎所有webpack無法直接實現的功能都能在社群找到開源的plugin去解決,需要善於使用搜尋引擎去解決。

深入淺出webpack

配置含義 配置 含義entry 配置模組的入口 output 配置如何輸出最終想要的 module 配置處理模組的規則 resolve 配置尋找模組的規則 plugins 配置擴充套件外掛程式 devserver 配置 devserver 型別例子 含義string 入口模組的檔案路徑,可以是相對路...

深入淺出Webpack

commonjs require 同步載入依賴 module.exports node.js 需通過工具轉為es5 amdasynchronous module definition 非同步載入模組 es6模組化 import xx from export default export 樣式檔案 i...

深入淺出webpack學習 2 Entry

現在介紹一下webpack配置中的entry entry是配置模組的入口,可以抽象成輸入,webpack執行構建的第一步將從入口開始搜尋及遞迴解析出所有入口依賴的模組。注意 entry是必填,若不填寫則將導致webpack報錯退出 webpack在尋找相對路徑的檔案時會以context為根目錄,co...