webpack1.xx之plugin

插件可以完成更多 loader 不能完成的功能。
插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。

1. webpack内建插件

// webpack should be in the node_modules directory, install if not.
var webpack = require("webpack");

//这个插件的作用是给输出的文件头部添加注释信息。
module.exports = {
    plugins: [
        new webpack.BannerPlugin("This is ...")
      ]
};

2. 第三方插件

通过npm 发布的一些插件
首先安装

npm install component-webpack-plugin

使用

var ComponentPlugin = require("component-webpack-plugin");
module.exports = {
    plugins: [
        new ComponentPlugin()
    ]
}

建议：当安装第三方插件通过npm建议使用这个工具:https://www.npmjs.com/package/webpack-load-plugins
检查所有安装在你依赖中的第三方插件。

3. 用过的一些插件的介绍

1.内部插件 new webpack.DefinePlugin(definitions)

DefinePlugin允许您创建全局变量,可以在编译时进行配置。这对开发构建和发布构建非常有用。例如,您可能使用一个全局常数确定是执行开发构建还是发布构建行为，这种场景下DefinePlugin很便利。

  var webpack  = require("webpack");
  module.exports = {
    plugins:[
      new webpack.DefinePlugin({
           // 配置开发全局常量 
            env: development
       })
    ]
  }

**2.第三方插件copy-webpack-plugin
复制高度静态资源，有时候一些资源是高度静态资源不需要进行打包，直接复制到指定的文件目录进行引用。比如：一些本地库。
安装

  npm install --save-dev copy-webpack-plugin

使用

var  CopyWebpackPlugin = require('copy-webpack-plugin'),
 module.exports = {
    plugins:[
      new CopyWebpackPlugin([
          {
            from:' ',
            to:' ',
            ignore: ['*.md']
          } //主要参数 from:从哪里复制  to:复制之后放到哪里 ,ignore:不复制的忽略
       ])
    ]
  }
//如果不指定to ,则默认放在output目录下面。

3.第三方插件html-webpack-plugin
这个插件可以帮助生成 HTML 文件，在 body 元素中，使用 script 来包含所有你的 webpack bundles，只需要在你的 webpack 配置文件中如下配置：

安装

$ npm install html-webpack-plugin --save-dev

使用

var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpackConfig = {
  entry: 'index.js',
  output: {
    path: 'dist',
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin({
      filename: 'index.html', 
      template: 'index.html',
      inject: 'body',
      title: 'webpack loader'
  })]
};

参数

详解地址： https://www.npmjs.com/package/html-webpack-plugin

4. webpack-hot-middleware 热替

安装

npm install --save-dev webpack-hot-middleware

使用：

plugins: [
    // OccurenceOrderPlugin is needed for webpack 1.x only
    //热替换时需要的三个内置插件
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
]

详解地址： https://github.com/glenjamin/webpack-hot-middleware

** 5.extract-text-webpack-plugin**
作用：webpack提取css片段到css文件的插件

详解地址：https://github.com/webpack-contrib/extract-text-webpack-plugin/blob/webpack-1/README.md
未完待续