[Webpack並不難]使用教程（三）--- plugins

使用教程（一）--- entry，devtool，output，resolve
使用教程（二）--- module.loaders
Webpack版本 3.10.0

Plugins (官方的文檔)

• 上一篇講到的 loader 是被用來轉換某些類型的模塊，它則能夠用來作更普遍的任務。
• 如：模板編譯輸出，捆綁優化，定義相似環境變量等等。

plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
  ]

1. plugins: 數組形式包住一個個 plugin 實例。

2. 每一個插件實例是一個具備 apply 屬性的 js 對象 (Function.prototype.apply)。

   const webpack = require('webpack');
   const configuration = require('./webpack.config.js');
   let compiler = webpack(configuration);
   
   function HelloWorldPlugin (options) {
   // do something...
   }
   
   // this 指向了 compiler。
   HelloWorldPlugin.prototype.apply = function (compiler) {
   // compiler.plugin(),可看做綁定事件，打包時會觸發事件。
   compiler.plugin('run', function() { 
       console.log('hello world!')
   });
   };

3. 每一個插件都有自身 options（配置）。
4. 下面說下常見的 plugin 。

webpack.DefinePlugin (官方的文檔)

• webpack.xxxxPlugin 這種插件是 webpack 的內置插件。

• DefinePlugin：它的做用是定義全局常量，是常量。即在模塊用它定義的全局常量，那麼你就不能改變它的值啦。用法例子：

  //webpack.config.js 
  Plugins: [
      new webpack.DefinePlugin({
          '_ABC_': false
      })
  ]
  
  // 在某個要打包的js模塊裏
  if （_ABC_）{
      console.log('_ABC_是 true，纔看得見這輸出');
  }

webpack.HotModuleReplacementPlugin (官方的文檔)

• 它是熱模塊更換（HMR） 。在應用程序運行時交換，添加或刪除模塊，而無需徹底從新加載。
• 它的options：

配置屬性	數據類型	做用
multiStep	Boolean	若是 true 插件將分兩步創建。首先編譯常更新的模塊，而後編譯剩餘的普通資源。
fullBuildTimeout	Number	multiStep 爲 true，啓用兩步之間的延遲。
requestTimeout	Number	下載某些東西的超時時間

官方講，這些 options 可能會被棄用 ，就 new webpack.HotModuleReplacementPlugin() 就能夠了。

webpack.NoEmitOnErrorsPlugin (官方的文檔)

• 它的做用：跳過編譯時出錯的代碼並記錄，使編譯後運行時的包不會發生錯誤。

webpack.optimize.DedupePlugin (官方的文檔)

• 項目中會有不少模塊，有些模塊之間存在相同的依賴，那麼它的做用是把重複的依賴刪除掉。
• 例如 A 模塊和 B 模塊都依賴lodash.js，那麼就留在一個 lodash.js ，多餘的刪除。

webpack.ProvidePlugin (官方的文檔)

• 會自動加載模塊，不用 import / require 導入均可用。

Plugins: [
    $: 'jquery'
]
// 不用導入 jquery ，均可用 $。
// 能夠理解爲在全局就 import $ from 'jquery' 或 const $ = require('jquery')

HtmlWebpackPlugin --第三方插件 （官方的文檔）

• 根據你提供的 html 模板 生成 html。
• 由於是第三方插件，須要安裝，導入使用。

// 安裝
npm install --save-dev html-webpack-plugin

// 導入
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 使用
 new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: true
  ... // 其餘配置，可看下面。
 })

1. filename: 生成的文件名。能夠帶路徑。
2. template：html 模板路徑。

3. inject：'true' | 'head' | 'body' | 'false' 。

   • true：將全部資源（ js，css 等等）注入模板，js 資源在注入 html 裏 body 底部。
   • body: 將全部 js 資源注入 html 裏 body 底部。
   • head：將 js 資源放在 html 裏 head 。
4. hash： 'true' | 'false'。 若是爲 true ，webpack 打包後，全部 js 和 css 都會帶有 hash 值。這對緩存清除很是有用。

5. minify： {...} | 'false' 。
   {...}：經過 html-minifier 的選項對象，來減少打包後文件的大小。在生產環境通常用到。看看裏面通常用到什麼吧。

   • collapseWhitespace：'true' | 'false' 。
     能夠理解爲若是 true ，則減小html 中節點與節點之間的空白區域。用於優化 html 。
   • removeComments： 若是 true ，則去掉 html 裏的註釋。

   • removeAttributeQuotes：若是 true ，則儘量地去掉 html 裏標籤元素屬性的引號，有些特定屬性則不會。（ 請注意，HTML規範建議始終使用引號。謹慎使用這選項 ）

     <p id="abc" title="hello world"></P>
     轉換爲：
     <p id=abc title="hello world"></p>
     // 可見有些特定的屬性是不會去掉引號的。

6. chunksSortMode：'none' | 'auto' | 'dependency' |'manual' | {function} 。
   做用：對注入 html 中的 js 模塊進行排序。默認：'auto' (自動排序)

   • auto： 默認，自動排序。
   • none： 不排序 。
   • dependency： 按依賴排序。
   • manual： 手動排序。
   • {function}： 按你傳入函數的功能進行排序。
7. 以上是常見的，還有其餘的，想了解能夠看下官方文檔哦。

---

plugins 就講到這裏了，以上都是一些常見經常使用的插件，喜歡的朋友能夠點波贊，謝謝啦。

使用教程四