IntelliJ IDEA：webpack集成

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

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

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

在IntelliJ IDEA中配置webpack

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

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

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

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

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

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

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

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

編輯webpack配置文件

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

對(duì)于webpack版本2及更高版本，IntelliJ IDEA在配置對(duì)象webpack.config.js中提供代碼完成和文檔查找。代碼完成即時(shí)提供。要查看符號(hào)的文檔，請(qǐng)按Ctrl+Q。

解析模塊

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

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

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

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