webpack 中splitChunk的使用方法

2022-05-07 04:33:09 字數 798 閱讀 1197

適合在多入口打包中使用

const path = require('path')

const webpack = require('webpack')

module.exports =,

output: ,

optimization:

}}

a入口和b入口都引入了jquery,打包時也分別打包到了各自的模組裡面,那麼我們可以把相同的模組提取出來

還有一些引數,看到那個vendors單詞沒,預設在這裡設定的

optimization: }}

},

嘗試改成其他名字

optimization: }}

},

出來的是這樣的

可以定義很多個規則

比如我們想react和react-dom打乙個包,vue和vuex打乙個包

預設引入的node_modules提取的的公共檔案叫做vendors命名

可以自定義處理不同模組,要寫priority,預設是-10,按照數字大的處理。

webpack 中 tree shaking得使用

看過 尤大神 直播關於講解 vue3.0得特性的同學 肯定也看到了 tree shking 這個特性了 先來講解下 什麼是 tree shking 先拿生活上的例子來說 字面意思是 搖晃樹枝 因為樹上可能有很多死的頁面 在樹枝上 我們可以通過搖晃 樹 來吧樹上的一些 死得樹葉 給搖晃下來 占個地方 ...

Webpack教程,更新中

新寫的乙份webpack教程,目前在更新中。在寫babel教程的同時,發現很多babel的知識與webpack緊密相連,於是開始撰寫webpack教程。大家都知道webpack是乙個模組打包工具,但在使用的時候並不容易,因為它有著複雜的體系結構。目前已經完成了10節教程,大概乙個周可以更新2節,應該...

webpack中結合Vue使用

1 安裝vue的包 cnpm i vue s 2 由於在webpack中,推薦使用.vue這個元件模板檔案定義元件,所以需要安裝能解析這個檔案的loader cnpm i vue loader vue template compiler d 3 在main.js中,匯入vue模組 import vu...