"Webpack 5 和 ESM"

Question

我想我已經閱讀了 SO 上的每個線程以及互聯網上的每個相關頁面，一切都有一些問題

我想：

• 使用 webpack 捆綁我的 web 應用<\/li>
• 在我的源 js 中使用 ES 模塊並將它們轉換為更廣泛的瀏覽器支持<\/li>
• 在我的 webpack 配置中使用 ES 模塊<\/li><\/ul>

  據稱 Node 14 支持 ESM，所以讓我們使用它

  設置 1<\/strong>

  我的package.json<\/code>中有"type": "module"<\/code>

  然后我的webpack.config.js<\/code>看起來像：

  運行> webpack<\/code> (webpack-cli) 我得到：
  好的，讓我們按照錯誤消息中的說明進行操作
  設置 2a<\/strong>
  如果我從我的package.json<\/code>中刪除"type": "module"<\/code>我得到
  對....所以讓我們嘗試其他建議的替代方案：
  設置 2b<\/strong>
  我得到一個段錯誤。
  

Answer 1

在撰寫本文時，webpack-cli 還不支持 ES6 模塊，因此您基本上必須自己重新實現它。

其實沒那么難，就是煩。 你需要這樣的東西（為了簡潔而簡化）：這里只是 RTFM https://webpack.js.org/api/node/

import webpack from 'webpack';
import webpackConfig from './webpack.config.js';


var config = await webpackConfig(mode);
var compiler = webpack(config);

compiler.watch()

Answer 2

正如其他答案所述，Webpack 沒有對 ESM 配置文件的本機支持，但它確實支持自動轉換它們。 如果您的配置文件名為webpack(.whatever).babel.js ，並且您已經正確安裝了babel ，那么您的配置文件將在使用前安靜地降級。

據我所知，在這種情況下配置 Babel 的唯一方法是在項目目錄中使用頂級.babelrc 。 我的只是包含{"presets": ["@babel/preset-env"]} 。 這確實意味着如果我想在構建中使用 Babel，我必須通過例如插件選項來配置它，但它對我有用。

ETA：用戶@bendwarn 在已刪除的評論中說，從 Webpack CLI 4.5.0 開始，您可以將您的配置文件webpack.config.mjs或者如果您的包type: "module" ，則將其webpack.config.js並且它應該本地工作。 我還沒有嘗試過（坦率地說，第二個聽起來是個糟糕的主意）。

Answer 3

webpack-cli<\/code>現在支持 ES 模塊。

"