filename 檔名稱目錄
path 輸出檔案目錄
publicpath 所有資源引用公共路徑字首
chunkfilename 非入口chunk的名稱
library 整個庫向外暴露的名稱
librarytarget 變數新增到哪個上
module:
], 多個
exclued:
/node_modules/
, 排除檔案
include 只匹配檔案
enforce:
'pre' 優先執行
enforce:
'post' 延後執行
oneof:
以下配置只會執行乙個
(針對檔案)
options:
指定配置
配置解析模組路徑別名 import
'$css/index.css'
alias:
配置省略檔案路徑的字尾名 import
'$css/index'
extensions:
['.css'
,'.json'
]
告訴 webpack 解析模組是去找哪個目錄
modules:
[reslove
(__dirname,
'../../node_modules'),
'node_modules']}
]}
devserver:
compress:
true
, 開啟壓縮
port:
3000
, 埠號
host:
'localhost'
, 網域名稱
open:
true
, 自動開啟
clientloglevel:
'none'
, 不要顯示伺服器日誌資訊
quiet:
true
, 除了基本資訊,其他的不顯示
overlay:
false
, 如果出錯了,不要全屏提示
伺服器**--
-->解決開發環境跨域
proxy:}}
}}
optimization:
,default:,
}},//解決修改a中的檔案,引入a的檔案也會改變
// 將當前模組的記錄和其他模組的hash單獨打包為乙個runtime檔案
runtimechunk:
` }
, minimizer:
[//配置生產環境的壓縮方案:js和css
newterserwebpackplugin()
]},
webpack 配置詳解
entry的用法，目前已經都遇到過了，一共三種。entry src js index.js 單入口 它會打包形成乙個chunk。輸出乙個bundle檔案。此時chunk的名稱預設是 main 就是假如在output裡，沒有指定名字 filename name js 那麼預設名是main entry ...
webpack各配置詳解
例如 devtool cheap module eval source map 當專案中報錯可以準確的定位到哪個檔案報錯 對比項構建速度 重新構建速度 提示定位 cheap module eval source map 原始源 eval webpack生成後的 可根據場景使用這兩個值除錯 webpa...
webpack配置詳解 一 entry詳解
單入口 打包形成乙個chunk。輸出乙個bundle檔案。此時chunk的名稱預設是 main多入口 所有入口檔案最終只會形成乙個chunk,輸出出去只有乙個bundle檔案。只有在hmr功能中讓html熱更新生效 多入口 有幾個入口檔案就形成幾個chunk，輸出幾個bundle檔案 此時chunk...