webpackConfig 上的 ESM 導入

Question

我正在構建一個 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 版本

Answer 1

Webpack CLI 需要一個 commonJS 文件。 可以使用 Experiments.mjs 標志啟用對.mjs文件的experiments.mjs性支持，但似乎存在許多問題。 因此，您可以通過使用無配置或使用.cjs配置來使用 webpack：

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

還要記住，像 Jest 這樣的東西不適用於 esm（截至目前），因此如果不需要 babel/esm，您需要使用另一個測試套件。

Answer 2

至少更新到 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 ，它也將起作用