1>插件分为
内置插件(不需要安装和引用可以直接使用)和第三方插件(需要npm安装,require引用)
2>常用的内置插件
1》UglifyJsPlugin new webpack.optimize.UglifyHJsPlugin([options])
解析/压缩/美化所有的js chunk(块)
2》DedupPlugin new webpack.optimizeDedupPlugin()
有些js库有自己的依赖树,并且这些库可能有交叉依赖,DedupPlugin 可以找出他们并删除重复的依赖。
3》NoEmitOnErrorsPlugin new webpack.NoEmitOnErrorsPlugin()
跳过编译出错的代码并记录,使编译后运行时的包不会发生错误
4》ProvidePlugin new webpack.ProvidePlugin(definitions)
definitions定义标志符,当遇到指定标志符的时候,自动加载模块
5》CommonsChunkPlugin new webpack.optimizeDedupPlugin()
提取代码中公共模块,然后将公共模块打包到一个独立的文件中,以便在其他的入口和模块中使用。
3>常用的第三方插件
首先安装插件,插件的版本需要和webpack版本对应,版本不一致会报错。
1》ExtractTextPlugin var ExtractTextPlugin=require(“extracr-text-webpack-plugin”)
这个插件会提取entry chunk中所有的require(“*.css”),分离出单独的css文件。
2》autoprefixer var autoprefixer=require(“autoprefixer”)
自动检测兼容性给各个浏览器加个内核前缀的插件
3》HtmlWepbackPlugin var HtmlWepbackPlugin=require(“html-webpack-plugin”)
重构入口html,动态添加<link>和<script>,在以hash命名的文件上非常有用,因为每次编译都会改变。
4》OpenBrowserPlugin var OpenBrowserPlugin=require(“Open-browser-webpack-plugin
“)
在webpack启动成功后打开浏览器