通过导入为 Typescript 配置 WebPack

Question

typescript 的 webpack 配置教程显示了这样的内容：

const path = require('path');

module.exports = { ... }

将其用作 es 模块并使用例如进行配置不是更好吗？进口。或者像上面这样配置有什么原因吗？我找不到任何这样配置的示例：

import webpack from "webpack";
import path from "path";

export default () => { ... }

Answer 1

TypeScript 和较新的 ES 标准是普通 JavaScript 的超集。使用广泛支持的语法和功能编写配置文件使其更广泛可用和可接受，而不需要额外的设置。

TypeScript 在某些方面是更好的实践，但是您需要引入额外的依赖项和配置才能使用它，在某些组织中您甚至没有这种自由。与 ES 类似，Node.js 直到 v12 才原生支持 mjs。

好消息是，Webpack 还支持包括 TypeScript 在内的多种语言编写配置，请参阅 https://webpack.js.org/configuration/configuration-languages/

如果由于某种原因您无法直接编写 TypeScript，还可以通过使用 TypeScript JSDoc 注释来获取 IntelliSense 等功能：

/** @type { import('webpack').Configuration } */
const config = {...};
module.exports = config;

Answer 2

如果您需要输入函数返回值，请执行此操作：

// @ts-check

/**
 * @returns {import('webpack').Configuration}
 **/
function WebpackConfig() {
  return ...
}

对我来说，我的开发服务器配置位于另一个函数中，我像这样输入了它的返回值：

// @ts-check

/**
 * @returns {import('webpack-dev-server').Configuration}
 */
function getDevServerConfig() {
  return ...
}

最后我不得不将代理配置单独保存在另一个函数中。像这样输入：

// @ts-check

/**
 * @returns {import('webpack-dev-server').Configuration['proxy']}
 */
function getProxyConfig() {
  return ...
}

确保不要忘记要强制执行类型的 js 文件顶部的

// @ts-check

注释。