① 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的專業版商用是需要付費的，沒有必要在工作中使用破解的軟體。