webpack插件分為兩種，一種是內置插件，即親兒子，不需要安裝和引用可直接使用，另一種是第三方插件，需要npm安裝，require引用后才可使用。

常用內置插件

UglifyJsPlugin new webpack.optimize.UglifyJsPlugin([options])</p>

解析/壓縮/美化所有的js chunk，傳入 options 可以滿足更多的定制化需求。

compress 壓縮配置項，查看配置項 。
sourceMap是否生成SourceMap文件，在配置devtool后有效，會導致編譯過程變慢，默認true。
mangle通過設置except數組來防止指定變量被改變。
<pre>new webpack.optimize.UglifyJsPlugin({
mangle: {
except: ['$super', '$', 'exports', 'require']
}
})</pre>
beautify（boolean）美化壓縮代碼。
test, include, exclude (RegExp|Array<RegExp>)用一個或多個正則表達式來過濾要處理的文件。
<pre>new webpack.optimize.UglifyJsPlugin({
test: /.js($|?)/i
})</pre>

DedupePlugin new webpack.optimize.DedupePlugin()</p>

有些JS庫有自己的依賴樹，并且這些庫可能有交叉的依賴，DedupePlugin可以找出他們并刪除重復的依賴。

NoEmitOnErrorsPlugin new webpack.NoEmitOnErrorsPlugin() </p>

跳過編譯時出錯的代碼并記錄，使編譯后運行時的包不會發生錯誤。

ProvidePlugin new webpack.ProvidePlugin(definitions)</p>

definitions定義標識符，當遇到指定標識符的時候，自動加載模塊，在下面例子中，無需在module中引入jquery，即可使用$方法。
<pre>new webpack.ProvidePlugin({
$: "jquery"
})
// in a module
$("#item")
</pre>

CommonsChunkPlugin new webpack.optimize.CommonsChunkPlugin(options)</p>

提取代碼中的公共模塊，然后將公共模塊打包到一個獨立的文件中，以便在其他的入口和模塊中使用。別忘了在html中單獨引入抽離出來的公共模塊。
常見的使用場景：
<ol><li>抽離多個entry的公共模塊
<pre>new webpack.optimize.CommonsChunkPlugin({
name: "commons",
filename: "commons.js",
})
<p>
entry: {
page1: './src/js/entry.js',
page2: './src/js/entry.js'
}
</pre></li><li>抽離vendor模塊
<pre>
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
minChunks: Infinity
})
<p>
entry: {
vendor: ["jquery", "other-lib"],
app: "./entry"
}
</pre></li><li>抽離子模塊中的公共模塊到父模塊中，會增加首屏加載的時間（不建議使用）<pre>new webpack.optimize.CommonsChunkPlugin({
children: true,
})</pre></li><li>和3類似，不過不是抽離到父模塊，而且額外抽離出一個異步的公共模塊<pre>new webpack.optimize.CommonsChunkPlugin({
children: true,
async: true
})</pre></li>
</ol>

第三方插件

ExtractTextPlugin var ExtractTextPlugin = require("extract-text-webpack-plugin");</p>

首先安裝插件，插件版本需要和webpack版本對應，我用的都是2.+的版本，版本不一致可能會報錯。<pre>npm install --save-dev extract-text-webpack-plugin@2.0.0-beta.4</pre>該插件會提取entry chunk中所有的require('*.css')，分離出獨立的css文件。
<pre>new ExtractTextPlugin([id: string], filename: string, [options])</pre>id插件實例的唯一標識，自動生成
filename輸出的filename，可以通過[name]/[id]/[contenthash]自定義filename
options.allChunks提取所有的chunk（默認只提取initial chunk）
options.disabledisable該插件<br />
<b>extract</b>
<pre>ExtractTextPlugin.extract(options: loader | object)</pre>options.loader(<i>required</i>)配置把資源轉換成css的loader
options.fallbackLoader當css不被提取的時候被使用
<pre>var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
//插件項
plugins: [
new ExtractTextPlugin({
filename: "style/[name].css?[hash]-[chunkhash]-[contenthash]-[name]",
disable: false,
allChunks: false
})
],
module: {
loaders: [
{ test: /.css$/, loader: ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: 'css-loader!autoprefixer-loader?{browsers:["last 2 version", "> 1%"]}'
})
}
]
}
}
</pre>不同版本可能寫法不一樣查看。