Webpack外掛機制介紹

Loader專注實現資源模組載入，plugin解決其他自動化工作，比如清除dist目錄，拷貝靜態檔案值輸出目錄,壓縮輸出程式碼等，下面列舉幾個plugin

的例子。

Webpack自動清除目錄外掛

Webpack常用外掛clean-webpack-plugin 自動清除目錄外掛

yarn add clean-webpack-plugin --dev

在webpack.config.js中引入模組 const { CleanWebpackPlugin } =require('clean-webpack-plugin')，新增配置plugins:[new CleanWebpackPlugin()]

Webpack自動生成HTML外掛 

yarn add html-webpack-plugin --dev webpack打包之後自動生成html檔案

webpack拷貝目錄外掛

yarn add copy-webpack-plugin --dev  webpack打包之後把未被打包的靜態資源打包到指定目錄

下面用Webpack開發一個外掛

官方規定是一個函式或者是一個包含apply方法的物件，相比較於Loader,Plugin擁有更寬的能力範圍plugin通過鉤子機制實現,鉤子機制

相當於事件,webpack給每一個環節都埋下了一個鉤子，開發外掛的時候掛載不同的任務,外掛的機制是通過在生命週期的鉤子中掛載函

數實現拓展,下面用程式碼嘗試去開發下去掉打包檔案中js無用註釋的外掛(webpack.config.js)。

webpack-dev-server

Webpack 整合自動編譯,自動重新整理瀏覽器及建立服務等功能,為了提高開發效率並沒有將打包結果存入磁碟中,打包結果暫時存放在內

存中,就可以達到一邊編碼一邊預覽的功能。

yarn add webpack-dev-server --dev --open

Dev Server預設只會serve打包輸出檔案，只要是Webpack輸出的檔案都可以正常被訪問到其他靜態資原始檔也需要被訪問的話需要

額外的告訴webpack dev server，需要新增額外的設定contentBase屬性。（如下圖所示）

Webpack解決跨域問題（代理API）

我們可以使用跨域資源共享(CORS) 使用CORS的前提是API必須支援,並不是任何情況下API都支援CORS如果同源部署（也就是域名

和埠一致）的話就沒必要開啟CORS。

webpack dev server支援配置代理服務，也就是說在開發伺服器中去配置代理服務，把我們的介面服務代理到介面服務地址，比如說

我們把github api 代理到開發伺服器。

相關推薦