Webpack框架知識整理——Plugins

5 Plugins 插件

　　5.1 我們的nodejs系統上充滿了插件，webpack也是基於各種插件才能正常工作的，插件對於webpack來說是一個非常重要的支柱，用於解決loader不能實現的很多事情。

　　插件：

　　　　插件是一個具有 apply 屬性的Javascript對象，其中apply屬性會被webpack compiler調用,compiler對象可以在整個編譯生命周期進行訪問；

　　　　function LogOnBuildWebpackPlugin() {

　　　　};
　　　　//通過 Function.prototype.apply把一個函數作為插件傳遞，在配置中這樣可以內聯自定義插件
　　　　LogOnBuildWebpackPlugin.prototype.apply = function(compiler) {
  　　　　　compiler.plugin('run', function(compiler, callback) {
    　　　　　　console.log("Hello，Let's start！");
   　　　　 　　callback();　　
  　　　　　});
　　　　};
　　5.2 插件可以攜帶參數/選項，在 webpack 配置中必須向 plugins 屬性傳入 new 實例，如下麵代碼所示。

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

　　　　const config = {
  　　　　entry: ...
  　　　　output: {
    　　　　...
  　　　　},
  　　　　module: {
   　　 　　...
  　　},
  　　plugins: [
    　　new webpack.optimize.UglifyJsPlugin(),// 通過 npm 安裝的插件

　　　　new HtmlWebpackPlugin({template: './src/index.html'}) //內置插件

　　]}; 　　
　　module.exports = config;