webpack3--plugins大用處

要想讓webpack爲我所用，不只要求咱們在loader使用上駕輕就熟，更離不開對plugins的熟練使用。

Pre：本文，承接loader全解析

若是說把webpack比喻成一臺豆漿機，咱們須要一杯豆漿喝，咱們要：

1. 準備好原材料，比如咱們的 entry 入口起點的處理；
2. 選擇豆漿品種，比如咱們在選擇 loader 加載器；
3. 攪拌電機工做，比如咱們 plugins 插件的大用處；
4. 完成倒出品嚐，比如咱們 output 輸出文件的處理；
5. 電力保障在線，比如咱們 devServer 服務開啓。
   這一形象的比喻，目的在於幫助咱們理解webpack的工做機制，要想用好它，就必須清楚每一個module的原理和使用方法。

   下面重點談談plugins的大用處：

   插件（plugins）

   loader 僅在每一個文件的基礎上執行轉換，而 插件(plugins) 更經常使用於（但不限於）在打包模塊的 「compilation」 和 「chunk」 生命週期執行操做和自定義功能。webpack 的插件系統極其強大和可定製化。

• 使用方法：
  想要使用一個插件，你只須要 require() 它，而後把它添加到 plugins 數組中。
  多數插件能夠經過選項(option)自定義。你也能夠在一個配置文件中由於不一樣目的而屢次使用同一個插件，這時須要經過使用 new 來建立它的一個實例。
  在webpack.config.js配置以下：

  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const webpack = require('webpack');
  const path = require('path');
  const config = {
  //入口配置
  entry: './path/to/my/entry/file.js',
  //輸出配置
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  //模塊loader加載轉換
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  //插件調用完成功能定製
  plugins: [
    //壓縮js插件
    new webpack.optimize.UglifyJsPlugin(),
    //以index.html文件爲模板生成html5新文件
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
  };
  module.exports = config;複製代碼

  經常使用webpack插件舉例

  webpack 有着豐富的插件接口(rich plugin interface)。webpack 自身的多數功能都使用這個插件接口。這個插件接口使 webpack 變得極其靈活。
  更多插件使用還請移步官網。

• CommonsChunkPlugin
  The CommonsChunkPlugin is an opt-in feature that creates a separate file (known as a chunk), consisting of common modules shared between multiple entry points. By separating common modules from bundles, the resulting chunked file can be loaded once initially, and stored in cache for later use. This results in pagespeed optimizations as the browser can quickly serve the shared code from cache, rather than being forced to load a larger bundle whenever a new page is visited.
  大體翻譯過來就是這個插件能夠幫助你從衆多模塊中抽離併合並出一個公共模塊文件，瀏覽器只加載一次便可，給頁面加載帶來速度上的提高。
  注意： 此插件屬於webpack內置 無需安裝

使用方法：
new webpack.optimize.CommonsChunkPlugin(options)

配置:

{
  name: string, // or
  names: string[],
  // 這是 common chunk 的名稱。已經存在的 chunk 能夠經過傳入一個已存在的 chunk 名稱而被選擇。
  // 若是一個字符串數組被傳入，這至關於插件針對每一個 chunk 名被屢次調用

  filename: string,
  // common chunk 的文件名模板。能夠包含與 `output.filename` 相同的佔位符。

  minChunks: number|Infinity|function(module, count) -> boolean,
  // 在傳入  公共chunk(commons chunk) 以前所須要包含的最少數量的 chunks 。
  // 數量必須大於等於2，或者少於等於 chunks的數量

  chunks: string[],
  // 經過 chunk name 去選擇 chunks 的來源。chunk 必須是  公共chunk 的子模塊。
  // 若是被忽略，全部的，全部的 入口chunk (entry chunk) 都會被選擇。

  children: boolean,
  // 若是設置爲 `true`，全部  公共chunk 的子模塊都會被選擇

  deepChildren: boolean,
  // If `true` all descendants of the commons chunk are selected

  async: boolean|string,
  // 若是設置爲 `true`，一個異步的  公共chunk 會做爲 `options.name` 的子模塊，和 `options.chunks` 的兄弟模塊被建立。

  minSize: number,
  // 在 公共chunk 被建立立以前，全部 公共模塊 (common module) 的最少大小。
}複製代碼

舉例：

// 提取公共文件
new webpack.optimize.CommonsChunkPlugin({
    name: 'reset',
    filename: 'vendor/common.js',
    //(模塊必須被3個 入口chunk 共享)
    minChunks: 3
}),複製代碼

• ExtractTextWebpackPlugin
  Extract text from a bundle, or bundles, into a separate file.
  這個插件是用來分離的，出單獨的一個文件

安裝：

npm install --save-dev extract-text-webpack-plugin複製代碼

使用方法：

const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
   module: {
     rules: [
       {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}複製代碼

它會將全部的入口 chunk(entry chunks)中引用的 *.css，移動到獨立分離的 CSS 文件。所以，你的樣式將再也不內嵌到 JS bundle 中，而是會放到一個單獨的 CSS 文件（即 styles.css）當中。

• HotModuleReplacementPlugin
  模塊熱替換插件,啓用熱替換模塊(Hot Module Replacement)，也被稱爲 HMR。
  注意：永遠不要在生產環境(production)下啓用 HMR
  用法：
  啓用 HMR 很是簡單，在大多數狀況下也不須要設置選項。

  new webpack.HotModuleReplacementPlugin({
     // Options...
  })複製代碼

• HtmlWebpackPlugin
  它簡化了HTML文件的建立，以便爲您的webpack包提供服務。 這對於在文件名中包含每次會隨着變異會發生變化的哈希的webpack bundle尤爲有用。

安裝

npm install --save-dev html-webpack-plugin複製代碼

使用方法：
SPA單頁面時：

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

var webpackConfig = {
  entry: 'index.js',
  output: {
    path: 'dist',
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin()]
};
module.exports = webpackConfig;複製代碼

這將會產生一個包含如下內容的文件 dist/index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>webpack App</title>
  </head>
  <body>
    <script src="index_bundle.js"></script>
  </body>
</html>複製代碼

多頁面時：

{
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin(), // Generates default index.html
    new HtmlWebpackPlugin({  // Also generate a test.html
      filename: 'test.html',
      template: 'src/assets/test.html'
    })
  ]
}複製代碼

• ProvidePlugin
  自動加載模塊，而沒必要處處 import 或 require 。
  當咱們的應用大量使用jQuery或Zepto時，能夠藉助此插件實現一次認定，處處使用。
  注意：webpack內置，不用安裝
  要自動加載 jquery，咱們能夠將兩個變量都指向對應的 node 模塊：

  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })複製代碼

  使用：Lodash Map

  new webpack.ProvidePlugin({
    _map: ['lodash', 'map']
  })複製代碼

• UglifyjsWebpackPlugin
  to minify your JavaScript
  這個插件用來壓縮你的js的，uglify翻譯過來是醜化，弄的難看，就是要變成在一堆的代碼，從而減少代碼文件的體積。

安裝：

npm i -D uglifyjs-webpack-plugin複製代碼

使用方法：

const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  plugins: [
    new UglifyJSPlugin()
  ]
}複製代碼

配置項：

{
    parse: {
        // parse options
    },
    compress: {
        // compress options
    },
    mangle: {
        // mangle options

        properties: {
            // mangle property options
        }
    },
    output: {
        // output options
    },
    sourceMap: {
        // source map options
    },
    ecma: 5, // specify one of: 5, 6, 7 or 8
    nameCache: null, // or specify a name cache object
    toplevel: false,
    ie8: false,
    warnings: false,
}複製代碼

更多參數請參考Uglifyjs官網