① Web前端开发常用工具的全部推荐
1、AptanaStudio
AptanaStudio是一个集成式的Web应用程序开发环境，它不仅锋腊可以作为独立的程序运行宽基笑，而且还可以作为Eclipse插件使用。所以，如果您已经安装了Eclipse的话，就可以将Aptana作为插件直接安装到您的Eclipse环境中。早起作为一个插件可以集成与Eclipse中来开发前端，现在已经独立出来，也是我最早接触js所使用的一款开发工具，如果熟悉了Eclipse快捷键的小伙伴可以快速上手。
2、Vim
Vim作为一个类似于Vi的文本编辑器，功能强大的同时还可以做到高度可定制。当然了，虽然Vim类似Vi，但是它在Vi的基础上改进和增加了很多特性，VIM是纯粹的自由软件。即使Vim的学习成本高，但只要我们掌握很多的快捷键和一些小技巧，它就能大大提高Web前端开发的工作效率。
3、PrettierPlayground
Prettier是一种代码格式化程序，支持JavaScript，包括ES2017、JSX、Angular、Vue、Flow和TypeScript等。它会用符合标准并遵循最佳实践的样式替换掉你原来的样式。这个方便的工具在我们的IDE中非常流行，但是它也有自己的在线版本，你可以在里面优化你的代码。
4、EnjoyCSS
EnjoyCSS是一款非常简单的工具，尤其对于不擅长使用CSS的前端开发者来讲。它为用户提供了简单的UI，让用户可以设计元素，并提供对应的CSS输出。
5、Postman
在前端开发的过程中，Postman可以说是必备的开发工具之一。它能在后端检查端点，而且非常好用。它的出色表现让我把它放到了这慎含里。它包含的端点包括GET、POST、DELETE、OPTIONS和PUT之类。可以称之为绝对不能错过的一款工具。
6、Bit.dev
软件开发的一项基本原则是代码可重用性。这可以减少你的开发工作，因为你无需从头开始构建每个组件。这正是Bit.dev所做的。它使你可以共享可重用的代码组件和代码片段，从而减少开销并加快开发流程。它还允许在团队之间共享组件，这使你的团队可以与其他团队更好地协作。
7、StackBlitz
StackBlitz是所有用户最喜欢的在线IDE工具。主要原因是它将我们最喜欢和最常用的IDE——也就是VisualStudioCode，引入了Web端。StackBlitz允许你一键设置Angular、React、Ionic、TypeScript、RxJS、Svelte和其他JavaScript框架。一键设置这个功能意味着开发者可以在极短的时间内开始编码。有了StackBlitz，你只需不到几分钟的时间就可以试用新的NPM软件包，而无需从头开始在本地创建项目。
以上就是关于Web前端开发常用工具的全部推荐，大家要是想提供自己的工作效率，现在就赶紧用起来吧！
② 开源了一个 webpack 插件，希望对大家有所帮助
最近，陆陆续续搞 了一个 插件(下面介绍)，这是自己第三个开源项目，希望大家一起来维护，一起 star 呀，其它两个：
用 uniapp开发小程序的小伙伴应该知道，我们在 uniapp 中要使用第三方 UI 库( vant-weapp ， iView-weapp )的时候 ，想要在全局中使用，需要在 src/pages.json 中的 usingComponents 添加对应的组件声明，如：
但在开发过程中，我们不太清楚需要哪些组件，所以我们可能会全部声明一遍（PS:这在做公共库的时候更常见)，所以我们得一个个的写，做为程序员，我们绝不允许使用这种笨方法。 这是第一个痛点 。
使用第三方组件，除了在 src/pages.json 还需要在对应的生产目录下建立 wxcomponents ，并将第三方的库拷贝至该文件下，这个是 uniapp 自定义的，详细就见：https://uniapp.dcloud.io/frame?id=%e7%9b%ae%e5%bd%95%e7%bb%93%e6%9e%84。
这是第二个痛点 。
第二痛点，我们将整个UI库拷贝至 wxcomponents ，但最终发布的时候，我们不太可能全都用到了里面的全局组件，所以就将不必要的组件也发布上去，增加代码的体积。
有的小伙伴就会想到，那你将第三方的库拷贝至 wxcomponents 时候，可以只拷使用到的就行啦。是这理没错，但组件里面可能还会使用到其它组件，我们还得一个个去看，然后一个个引入，这又回到了 第一个痛点了 。
有了这三个痛点，必须得有个插件来做这些傻事，处理这三个痛点。于是就有 插件，这个webpack 插件主要解决下面几个问题：
webpack 的插件体系是一种基于 Tapable 实现的强耦合架构，它在特定时机触发钩子时会附带上足够的上下文信息，插件定义的钩子回调中，能也只能与这些上下文背后的数据结构、接口交互产生 side effect，进而影响到编译状态和后续流程。
从形态上看，插件通常是一个带有 apply 函数的类：
Webpack 会在启动后按照注册的顺序逐次调用插件对象的 apply 函数，同时传入编译器对象 compiler ，插件开发者可以以此为起点触达到 webpack 内部定义的任意钩子，例如：
注意观察核心语句 compiler.hooks.thisCompilation.tap ，其中 thisCompilation 为 tapable 仓库提供的钩子对象； tap 为订阅函数，用于注册回调。
Webpack 的插件体系基于 tapable 提供的各类钩子展开，所以有必要先熟悉一下 tapable 提供的钩子类型及各自的特点。
到这里，就不做继续介绍了，关于插件的更多 详情可以去官网了解。
这里推荐 Tecvan 大佬写的 《Webpack 插件架构深度讲解》
插件主要用到了三个 compiler 钩子。
第一个钩子是 environment :
这个钩子主要用来自动引入其下的原生组件，这样就无需手动配置。 解决第一个痛点 。
第二个钩子 thisCompilation ，这个钩子可以获得 compilation ，能对最终打包的产物进行操作：
所以这个勾子用来将 node_moles 下的第三库拷贝到我们生产 dist 目录里面的 wxcomponents ， 解决第二个痛点 。
ps：这里也可直接用现有的 -webpack-plugin 插件来实现。
第三个钩子 done ，表示 compilation 执行完成：
执行完成后，表示我们已经生成 dist 目录了，可以读取文件内容，分析，获取哪些组件被使用了，然后删除没有使用到组件对应的文件。这样就可以解决我们 第三个痛点了 。
PS：这里我判断只有在生产环境下才会 剔除，开发环境没有，也没太必要。
安装
然后将插件添加到 WebPack Config 中。例如：
NameType Description patterns{Array}为插件指定相关
moleprefix 模块名组件前缀
mole 是指 package.json 里面的 name ，如使用是 Vant 对应的 mole 为 @vant/weapp ，如果使用是 iview，刚对应的 mole 为 iview-weapp ，具体可看它们各自的 package.json 。
prefix 是指组件的前缀，如 Vant 使用是 van 开头的前缀，iview 使用是 i 开头的前缀，具体可看它们各自的官方文档。
PS: 这里得吐曹一下 vant，叫别人使用 van 的前缀，然后自己组件里面声明子组件时，却没有使用 van 前缀，如 picker 组件，它里面的 JSON 文件是这么写的：
picker-column 和 loading 都没有带 van 前缀，因为这个问题，在做 自动剔除 功能中，我是根据 前缀来判断使用哪些组件的，由于这里的 loading ， picker-column 没有加前缀，所以就被会删除，导致最终的 picker 用不了。为了解决这个问题，增加了不少工作量。
希望 Vant 官方后面的版本能优化一下。
本文通用自定义 Webpack 插件来实现日常一些技术优化需求。主要为大家介绍了 Webpack 插件的基本组成和简单架构，通过三个痛点，引出了 uni-using-components-webpack-plugin 插件，并介绍了使用方式，实现思路。
最后，关于 Webpack 插件开发，还有更多知识可以学习，建议多看看官方文档《Writing a Plugin》进行学习。
③ webpack编写插件
查看原文 | 编辑此页
插件向第三方开发者提供了 webpack 引擎中完整的能力。使用阶段式的构建回调，开发者可以引入它们自己的行为到 webpack 构建流程中。创建插件比创建 loader 更加高级，因为你将需要理解一些 webpack 底层的内部特性来做相应的钩子，所以做好阅读一些源码的准备！
webpack 插件由以下组成：
在插件开发中最重要的两个资源就是 compiler 和 compilation 对象。理解它们的角色是扩展 webpack 引擎重要的第一步。
这两个组件是任何 webpack 插件不可或缺的部分（特别是 compilation ），因此，开发者在阅读源码，并熟悉它们之后，会感到获益匪浅：
插件是由“具有 apply 方法的 prototype 对象”所实例化出来的。这个 apply 方法在安装插件时，会被 webpack compiler 调用一次。 apply 方法可以接收一个 webpack compiler 对象的引用，从而可以在回调函数中访问到 compiler 对象。一个简单的插件结构如下：
然后，要安装这个插件，只需要在你的 webpack 配置的 plugin 数组中添加一个实例：
使用 compiler 对象时，你可以绑定提供了编译 compilation 引用的回调函数，然后拿到每次新的 compilation 对象。这些 compilation 对象提供了一些钩子函数，来钩入到构建流程的很多步骤中。
关于 compiler , compilation 的可用回调，和其它重要的对象的更多信息，请查看 插件 文档。
有一些编译插件中的步骤是异步的，这样就需要额外传入一个 callback 回调函数，并且在插件运行结束时， 必须 调用这个回调函数。
一旦能我们深入理解 webpack compiler 和每个独立的 compilation，我们依赖 webpack 引擎将有无限多的事可以做。我们可以重新格式化已有的文件，创建衍生的文件，或者制作全新的生成文件。
让我们来写一个简单的示例插件，生成一个叫做 filelist.md 的新文件；文件内容是所有构建生成的文件的列表。这个插件大概像下面这样：
webpack 插件可以按照它所注册的事件分成不同的类型。每一个事件钩子决定了它该如何应用插件的注册。
applyPlugins(name: string, args: any...)
applyPluginsBailResult(name: string, args: any...)
这意味着每个插件回调，都会被特定的 args 一个接一个地调用。 这是插件的最基本形式。许多有用的事件（例如 "compile" , "this-compilation" ），预期插件会同步执行。
applyPluginsWaterfall(name: string, init: any, args: any...)
这种类型，每个插件都在其他插件依次调用之后调用，前一个插件调用的返回值，作为参数传入后一个插件。这类插件必须考虑其执行顺序。 必须等前一个插件执行后，才能接收参数。第一个插件的值是 初始值(init) 。这个模式用在与 webpack 模板相关的 Tapable 实例中（例如 MoleTemplate , ChunkTemplate 等）。
applyPluginsAsync(name: string, args: any..., callback: (err?: Error) -> void)
这种类型，插件处理函数在调用时，会传入所有的参数和一个签名为 (err?: Error) -> void 的回调函数。处理函数按注册时的顺序调用。在调用完所有处理程序后，才会调用 callback 。 这也是 "emit" , "run" 等事件的常用模式。
applyPluginsAsyncWaterfall(name: string, init: any, callback: (err: Error, result: any) -> void)
这种类型，插件处理函数在调用时，会传入当前值(current value)和一个带有签名为 (err: Error, nextValue: any) -> void. 的回调函数。当调用的 nextValue 是下一个处理函数的当前值(current value)时，第一个处理程序的当前值是 init 。在调用完所有处理函数之后，才会调用 callback，并将最后一个值传入。如果其中任何一个处理函数传入一个 err 值，则会调用此 callback 并将此 error 对象传入，并且不再调用其他处理函数。 这种插件模式适用于像 "before-resolve" 和 "after-resolve" 这样的事件。
applyPluginsAsyncSeries(name: string, args: any..., callback: (err: Error, result: any) -> void)
- 并行(parallel) -
applyPluginsParallel(name: string, args: any..., callback: (err?: Error) -> void)
(name: string, args: any..., callback: (err: Error, result: any) -> void)
④ 社区版idea没有web插件
社区版idea没有web插件原因是该社区版不支持。根据查询相关资料显示，社区版idea并没有直接的图形化工具可以运行或发布web应用，社区版idea不支持Web的开发。IDEA的专业版商用是需要付费的，没有必要在工作中使用破解的软件。