Plugins

文檔地址
Plugins是webpack的基礎(chǔ)，jwebpack本身就是基于plugin system構(gòu)建的。
使用的plugin system同構(gòu)建普通app的plugin system形同。
plugin 提供一些loader無法實現(xiàn)的功能

剖析

webpack plugin是包含apply屬性的Javascript 對象。
webpack compiler會調(diào)用apply屬性，能夠運行于編譯時的生命周期。
ConsoleLogOnBuildWebpackPlugin.js

function ConsoleLogOnBuildWebpackPlugin() {

};

ConsoleLogOnBuildWebpackPlugin.prototype.apply = function(compiler) {
  compiler.plugin('run', function(compiler, callback) {
    console.log("The webpack build process is starting!!!");

    callback();
  });
};

使用Function.prototype.apply方法可以將任何function作為插件（this指向compiler對象）?？梢允褂迷撎匦宰远xplugins。

Usage

由于plugins可以接受argument/options,所以需要在webpack配置中傳遞通過new關(guān)鍵字創(chuàng)建的plugin對象。

配置

webpack.config.js配置文件的方式

配置為array對象。
如下：

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

當(dāng)多個bundles都是用一個通用的以來，CommonsChunkPlugin可以將依賴代碼抽取出來。

plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    ...
  })
]

比較復(fù)雜的配置示例如下

// importing plugins that do not come by default in webpack
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var DashboardPlugin = require('webpack-dashboard/plugin');

// adding plugins to your configuration
plugins: [
  // build optimization plugins
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    filename: 'vendor-[hash].min.js',
  }),
  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false,
      drop_console: false,
    }
  }),
  new ExtractTextPlugin({
    filename: 'build.min.css',
    allChunks: true,
  }),
  new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]),
  // compile time plugins
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': '"production"',
  }),
  // webpack-dev-server enhancement plugins
  new DashboardPlugin(),
  new webpack.HotModuleReplacementPlugin(),
]

Node API的形式

  const webpack = require('webpack'); //to access webpack runtime
  const configuration = require('./webpack.config.js');

  let compiler = webpack(configuration);
  compiler.apply(new webpack.ProgressPlugin());

  compiler.run(function(err, stats) {
    // ...
  });