webpack各配置詳解

2021-09-13 11:08:40 字數 669 閱讀 9576

例如: devtool: 'cheap-module-eval-source-map' 當專案中報錯可以準確的定位到哪個檔案報錯

對比項構建速度

重新構建速度

**提示定位

cheap-module-eval-source-map+++

原始源**

eval

++++++

webpack生成後的**

可根據場景使用這兩個值除錯**

webpack.config.js中匯出的alias物件內配置   key ——> 快捷方式名   value ——> 對應的路徑
dll: ['vue', 'axios'] 這樣使用即可
例如: typescript: true ==> 專案中可以使用ts

scss: ,

}

可以轉換靜態資源asset下的scss檔案

例如: commonschunkplugin 提取塊之間共享的公共模組

例如: key ——> hints value ——> "warning"

將展示一條警告,通知你這是體積大的資源

devserver:

webpack配置詳解

filename 檔名稱目錄 path 輸出檔案目錄 publicpath 所有資源引用公共路徑字首 chunkfilename 非入口chunk的名稱 library 整個庫向外暴露的名稱 librarytarget 變數新增到哪個上module 多個 exclued node modules 排...

webpack 配置詳解

entry的用法,目前已經都遇到過了,一共三種。entry src js index.js 單入口 它會打包形成乙個chunk。輸出乙個bundle檔案。此時chunk的名稱預設是 main 就是假如在output裡,沒有指定名字 filename name js 那麼預設名是main entry ...

webpack配置詳解 一 entry詳解

單入口 打包形成乙個chunk。輸出乙個bundle檔案。此時chunk的名稱預設是 main多入口 所有入口檔案最終只會形成乙個chunk,輸出出去只有乙個bundle檔案。只有在hmr功能中讓html熱更新生效 多入口 有幾個入口檔案就形成幾個chunk,輸出幾個bundle檔案 此時chunk...