webpackConfig上的ESM导入

Question

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

我现在可以使用巴别塔，但这是在npm添加"type": "module"支持现在没有巴别塔的ESM导入之前…我已经在Express上试过了，它很管用，但在Webpack身上，我得到了这样的结果：

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

> require() of ES modules is not supported.

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

Answer 1

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

这意味着，如果您在目录中使用webpack.config.js，并且在其package.json中包含{"type": "module"}，那么它将会正常工作。

如果您只将文件命名为webpack.config.mjs，它也会起作用

Answer 2

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

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

还要记住，像Jest这样的东西不能与esm一起工作(到目前为止)，所以如果不需要babel/esm，那么您需要使用另一个测试套件。