webpackConfig 上的 ESM 导入答案

【问题标题】：ESM import on webpackConfigwebpackConfig 上的 ESM 导入
【发布时间】：2020-11-14 22:20:46
【问题描述】：

我正在构建一个 webpack 应用程序，我有兴趣在整个应用程序中使用 ESM，这意味着使用 ESM 导入构建 webpack.config 文件。

我现在可以使用 Babel，但这是在 npm 添加 "type": "module" 支持现在没有 babel 的 ESM 导入之前...我已经尝试使用 Express 并且它可以工作，但使用 Webpack 我得到了这个：

> ...proyectDirectory/node_modules/webpack-cli/bin/cli.js:93

> require() of ES modules is not supported.

所以我想知道是否有使用 import 而不是 require 的 webpack-cli 版本

【问题讨论】：

【解决方案1】：

至少更新到 webpack-cli 4.5.0。刚刚添加了对原生 ESM 配置文件的支持：https://github.com/webpack/webpack-cli/releases/tag/webpack-cli%404.5.0

这意味着如果您在 package.json 中包含 {"type": "module"} 的目录中使用 webpack.config.js，它将起作用。

如果您只是将文件命名为webpack.config.mjs，它也可以工作

【讨论】：

【解决方案2】：

Webpack CLI 需要一个 commonJS 文件。可以使用 experiments.mjs 标志启用对 .mjs 文件的实验性支持，但似乎存在许多问题。因此，您可以通过不使用配置或使用 .cjs 配置来使用 webpack：

 ./node_modules/.bin/webpack-cli --config webpack.config.cjs

另外请记住，像 Jest 这样的东西不适用于 esm（截至目前），因此如果不需要 babel/esm，您需要使用另一个测试套件。

【讨论】：