插件可以完成更多 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
未完待续
