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>不同版本可能写法不一样查看。
网友评论