webpack插件

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定义标志符,当遇到指定标志符的时候,自动加载模块

扫描二维码关注公众号,回复: 2688902 查看本文章

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启动成功后打开浏览器

猜你喜欢

转载自blog.csdn.net/qq_41047322/article/details/81448695