webpack部分插件介绍

在之前的react与webpack的搭配使用时介绍了webpack的基本使用及部分优化，而在实际的使用过程中还是遇到了一些其它问题，所以又把插件列表好好捋了一下，挑自己可能在日后工作用到的整理一下～可能有部分理解不到位，欢迎指正

• 不知道有没有小伙伴和我一样，老是遇到webpack打包过程中出现abort trap:6,然后webpack服务就挂了的情况，查网上资料，说是堆栈的问题，可是这种堆栈问题实际上不会影响到代码结果，因此你希望不要出现这种webpack服务突然挂了的状态，此时你可以加入NoErrorsPlugin插件，该插件可以当遇到错误时跳过，不终止webpack进程～（the webpack process will not exit with an error code by enabling this plugin）
• PrefetchPlugin,这个插件在网上的介绍资料很少，可是在我理解看来，该插件也可以起到一定的优化打包时间的效果，该插件的作用是当一个模块还未被require之前，提前解析和建立一个对该插件的请求，其中两个参数第一个是模块的绝对路径，第二个是对模块的请求字符串，eg:new webpack.PrefetchPlugin(__dirname +”/node_modules”,”react/react.js”)
• HotModuleReplacementPlugin,热更新所需插件，实现模块变动部分的替代而不重新刷新页面，有效提高调试时间，但是该插件的使用并不仅仅在webpack.config.js中的plugins添加该插件即可，而是需要
  
  红线所框内容的集体配合，当然，现在react-hot-loader已经被废弃了。。。你也可以选择最新的 React Hot Boilerplate， React transform Boilerplate等等～～
• HtmlWebpackPlugin,可以为你的web应用生成一个单独的基础html,支持模版，favicon等～，加速开发过程～
• WebpackBrowserPlugin（我对这个很感兴趣，正如对browser-sync调试一样,它用到了browser-sync技术），它当你的webpack或webpack-dev-server 执行完全后，自动为你的应用打开浏览器～
• FaviconsWebpackPlugin，csdn的页面中就有csdn专有的favicon~,而该插件则可以为不同的设备自动生成超过30种的favicon(它们的来源都是同一张图片)
• DedupePlugin可在production环境下帮助删除重复或相似文件，可以有效减少文件大小（用于打包文件优化，建议使用在生产环境）
• OccurrenceOrderPlugin,根据出现次数为每一个模块或者chunk设置id,经常使用的模块则会获取到较短的id(和前缀树类似)，这可以使id可预测并有效减少文件大小，建议使用在生产环境中～

• NpmInstallPlugin,这个并未在webpack官网的插件列表内提到过，但是个人认为它通过自动帮助我们安装依赖而提升了我们的开发效率，使用姿势如下图所示～，https://github.com/ericclemmons/npm-install-webpack-plugin，具体效果可以看下官网～

  plugins: [
    new NpmInstallPlugin({
      // Use --save or --save-dev
        dev: false,
      // Install missing peerDependencies
      peerDependencies: true,
    });
  ],
  

• 这个不算是插件介绍，但可以辅助了解你的webpack打包性能，你可以在webpack-dev-server的server.js中设置你的timing为true.这样你可以清楚的知道你的打包时间～～从而进行你的 webpack打包时间比较

其它的插件暂且还没有使用场景或在其它文章中介绍比较详细便不再赘述（譬如dllplugin插件对打包性能提升很多），前者如果用了的话会再添加到博客～