Webpack配置-經常使用Plugin

• 初識Plugin

  loader 用於轉換某些類型的模塊，而插件則能夠用於執行範圍更廣的任務。包括：打包優化，資源管理，注入環境變量。

• CleanWebpackPlugin

  若是沒有安裝任何插件的狀況下若是咱們執行 build指令必須手動刪除上一次打包的資源，若是不刪除上一次打包的資源文件有可能被遺留下來（好比上一次有一張圖片，此次打包這張圖片被刪除了，那麼就會被遺留以下圖：）
  因此每次打包都須要手動刪除一下上一次打包的文件。
  CleanWebpackPlugin能夠幫助咱們打包以前自動刪除對應的文件
  • 安裝
    yarn add clean-webpack-plugin -D
  • 配置
    
  • 打包結果

• HtmlWebpackPlugin

  若是要對項目進行部署的話必定要有一個入口文件也就是 index.html,可是此時打包文件夾中是沒有這個文件的，咱們能夠手動添加一個 index.html，也能夠經過 HtmlWebpackPlugin幫咱們自動生成一個index.html
  • 安裝
    yarn add html-webpack-plugin -D
  • 配置
    
  • 打包結果 該文件是經過一個模板生成的文件模板文件在源碼中以下圖： 咱們能夠自定義模板其中會有一些語法<% 變量 %>這個是EJS模塊填充數據的方式 打包結果：

• DefinePlugin

  幫助咱們在編譯時建立配置的全局常量，是一個webpack內置的插件（不須要單獨安裝）。 如上添加模板的時候此時咱們添加一個 favicon.ico以下圖
  此時打包會報錯： 提示找不到BASE_URL的定義，此時就能夠配置一個全局常量以下圖:

• CopyWebpackPlugin

  上文中使用 DefinePlugin解決了打包報錯的問題，可是運行起來發現圖表並無顯示以下圖 緣由很簡單，先看打包後的 index.html文件 他是在當前文件夾下找圖標文件，可是打包的文件中並無吧對應的圖標文件複製進來，此時可使用 CopyWebpackPlugin插件將制定文件夾的文件所有複製進來。
  • 安裝
    yarn add copy-webpack-plugin -D
  • 配置
    • 全部複製的規則添加到 patterns中，該參數的值對應的是個數組能夠添加多條
    • 每一個複製規則又包含以下參數 from、to、glocOptions
      • from:從那個文件夾開始賦值
      • to: 複製到那個位置，不設置默認複製到打包目錄下
      • glocOptions：設置一些額外的選項，好比 index.html不須要再複製應爲 HtmlWebpackPlugin已經生成了對應的文件了
    具體配置以下： 此時在打包以下圖： 發現僅僅複製了圖標文件其餘兩個文件沒有複製過來，而後再看運行結果