IntelliJ IDEA：webpack集成

此功能僅在Ultimate版本中受支持。

注意：在開始之前，請確保您的計算機(jī)上有Node.js.

IntelliJ IDEA與webpack模塊 bundler 集成。此支持通過考慮webpack模塊解析和解析別名來改進(jìn)JavaScript文件中的編碼幫助。對于webpack版本2及更高版本，IntelliJ IDEA為webpack配置文件中的選項提供代碼完成和快速文檔查找。

在IntelliJ IDEA中配置webpack

1. 確保WebPack列在您的package.json的dependencies或devDependencies對象中。如果缺少webpack，請安裝它：

   1. 打開內(nèi)置的IntelliJ IDEA終端（Alt+F12）。

   2. 在命令提示符下，鍵入：npm install --save-dev webpack。

2. 在項目根目錄或其他位置創(chuàng)建配置文件（新建|JavaScript文件）。你可以從webpack官方網(wǎng)站了解更多信息。

3. 指定要使用的webpack配置文件。默認(rèn)情況下，IntelliJ IDEA分析項目根目錄中的webpack配置文件。要使用其他webpack配置文件：

1. 在“設(shè)置/首選項”對話框（Ctrl+Alt+S）中，單擊“語言和框架”下的“JavaScript” ，然后單擊“Webpack”。

2. 在打開的Webpack頁面上，指定要使用的配置文件的位置。

基于對 webpack 配置文件的分析, IntelliJ IDEA了解 webpack 配置，并在 javascript 文件中提供編碼幫助，請參閱下面的“解析模塊”。

編輯webpack配置文件

提示：只有當(dāng) webpack 配置文件的名稱包含 webpack 字符串，并且在 pack. json 中列出了一個 webpack 字符串時，IntelliJ IDEA才會在webpack配置文件中提供編碼幫助。

對于webpack版本2及更高版本，IntelliJ IDEA在配置對象webpack.config.js中提供代碼完成和文檔查找。代碼完成即時提供。要查看符號的文檔，請按Ctrl+Q。

解析模塊

當(dāng)在“設(shè)置/首選項”|語言和框架|JavaScript|Webpack中打開項    目或編輯指定的webpack.config.js時，IntelliJ IDEA在后臺分析配置，并根據(jù)收到的信息，正確理解項目解析根和解析別名。由于對項目配置的理解，IntelliJ IDEA為JavaScript文件中的導(dǎo)入和導(dǎo)出符號提供了更精確的代碼完成。因此，一切正常，沒有任何步驟。

下圖說明了項目中的模塊分辨率，其中react-color是路徑'./src/index.js'的別名。IntelliJ IDEA正確解析導(dǎo)入react-color，為其提供導(dǎo)航并完成導(dǎo)出的符號：

調(diào)試使用webpack的應(yīng)用程序

您可以在調(diào)試任何JavaScript客戶端應(yīng)用程序時調(diào)試使用webpack的應(yīng)用程序，請參閱調(diào)試使用Create React App創(chuàng)建的React應(yīng)用程序和調(diào)試使用Angular CLI創(chuàng)建的Angular應(yīng)用程序。