webpack實用小功能介紹

1.overlay

overlay屬於devServer的屬性，配置案例以下：

?

1 2 3 4 5 6

devServer: {   overlay: {    errors: true ,    warnings: true   } }

配置很簡單，那它的做用是什麼呢？overlay的做用是能夠在瀏覽器打開的頁面顯示終端編譯時產生的錯誤。經過配置該屬性，之後在寫代碼的時候，編譯若是出錯了，咱們就不須要打開終端看究竟是什麼報錯了，能夠直接在頁面裏看到錯誤，對於開發而言確實很方便。

2.require.ensure

相比較overlay，require.ensure能夠的做用更加實用，上次講的vue2-webpack3咱們配置的是多頁面的應用，可是若是是SPA應用呢？

咱們最容易遇到的問題代碼所有打包在一個js裏面，致使這個js過於龐大，最終致使應用首次加載時等待時間過長，那麼該怎麼解決這個問題呢？require.ensure就是專門用來解決這個問題的。

該怎麼使用？

使用起來也很簡單，只要按照下面的寫法來進行vue的router配置便可：

?

1 2 3 4 5 6 7 8 9 10

const Layout = require( '../Layout' ) const Home = r => require.ensure([], () => r(require( '../home' ), home) export default [{   path: '/' ,   component: Layout,   children: [{    path: '' ,   component: Home   }] }]

能夠看到require.ensure有三個參數

第一個參數的做用是配置依賴列表，被依賴的模塊會和當前模塊打包到一塊兒； 第二個參數是一個函數，將要單獨打包的模塊傳入回調裏； 第三個參數是chunkname，可用來配置js的文件名； 配置完了之後，當咱們加載這個頁面的時候，屬於每一個頁面本身的代碼部分，就會單獨去加載了。

3.webpack-bundle-analyzer

這是一個webpack的插件，它的主要做用是用來分析咱們模塊打包的資源狀況，很是的直觀，也很是的實用

 

4.DllPlugin+DllReferencePlugin

在使用webpack開發的過程當中，相信不少人都會以爲有時候項目啓動編譯時間等待過久了，爲何呢？由於當項目慢慢龐大起來的時候，咱們依賴的模塊愈來愈多，每次項目啓動編譯都須要所有編譯打包，因此天然會致使編譯時間偏長，那如何解決這個問題呢？

首先思路是這樣的，通常node_modules文件中的依賴，基本上是不會去作改變的，因此沒有必要每次都去進行打包，咱們徹底能夠將這些依賴提早打包好，而後就能夠一直使用了。

DllPlugin就是用來提早打包咱們的依賴包的插件。DllPlugin分爲兩個插件，一個是DllPlugin，另外一個是DllReferencePlugin。