vscode 中智能化自動提示webpack配置項

vscode 中智能化自動提示webpack配置項

在這裏，我想跟你分享我在編寫 Webpack 配置文件時用過的一個小技巧，因爲Webpack 的配置項比較多，而且很多選項都支持不同類型的配置方式。如果你剛剛接觸 Webpack 的配置，這些配置選項一定會讓你感到頭大。如果開發工具能夠爲Webpack 配置文件提供智能提示的話，這種痛苦就會減小很多，配置起來，效率和準確度也會大大提高。

我們知道， VSCode 對於代碼的自動提示是根據成員的類型推斷出來的，換句話說，如果 VSCode 知道當前變量的類型，就可以給出正確的智能提示。即便你沒有使用 TypeScript 這種類型友好的語言，也可以通過類型註釋的方式去標註變量的類型。

默認 VSCode 並不知道 Webpack 配置對象的類型，我們通過 import 的方式導入 Webpack 模塊中的 Configuration 類型，然後根據類型註釋的方式將變量標註爲這個類型，這樣我們在編寫這個對象的內部結構時就可以有正確的智能提示了，具體代碼如下所示：

// ./webpack.config.js
import { Configuration } from 'webpack'

/**
 * @type {Configuration}
 */
const config = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js'
  }
}

module.exports = config

需要注意的是：我們添加的 import 語句只是爲了導入 Webpack配置對象的類型，這樣做的目的是爲了標註 config 對象的類型，從而實現智能提示。在配置完成後一定要記得註釋掉這段輔助代碼，因爲在 Node.js環境中默認還不支持 import 語句，如果執行這段代碼會出現錯誤。

// ./webpack.config.js

// 一定記得運行 Webpack 前先註釋掉這裏。
// import { Configuration } from 'webpack' 

/**
 * @type {Configuration}
 */
const config = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js'
  }
}

module.exports = config

使用 import 語句導入 Configuration 類型的方式固然好理解，但是在不同的環境中還是會有各種各樣的問題，例如我們這裏在 Node.js 環境中，就必須要額外註釋掉這個導入類型的語句，才能正常工作。

所以我一般的做法是直接在類型註釋中使用 import 動態導入類型，具體代碼如下：

// ./webpack.config.js
/** @type {import('webpack').Configuration} */
const config = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js'
  }
}
module.exports = config

這種方式同樣也可以實現載入類型，而且相比於在代碼中通過 import 語句導入類型更爲方便，也更爲合理。

不過需要注意一點，這種導入類型的方式並不是 ES Modules 中的 Dynamic Imports，而是 TypeScript中提供特性。雖然我們這裏只是一個 JavaScript 文件，但是在 VSCode 中的類型系統都是基於 TypeScript 的，所以可以直接按照這種方式使用，詳細信息你可以參考這種 import-types 的文檔。

其次，這種 @type 類型註釋的方式是基於 JSDoc 實現的。JSDoc中類型註釋的用法還有很多，詳細可以參考官方文檔中對 @type 標籤的介紹。

---

若有用望不吝點贊~