在 esm Angular 项目中使用 custom-webpack

Question

我将 custom-webpack 添加到我的 Angular 项目

当我将项目切换为使用 esm 时

• 将

  type: module

  设置为

  packae.json

• 将

  module: ES2022

  和

  target: ESNext

  设置为

  tsconfi.json

• 在

  export

   中使用 

  webpack.confi.js

但是我收到了这个错误

An unhandled exception occurred: Must use import to load ES Module: /home/projects/node-mdn6pg/webpack.config.js
require() of ES modules is not supported.

此错误由 此行

引起

// should be replaced with `import(path)`
  const customWebpackConfig = require(path);

有没有一种解决方法可以成功构建我的 esm 项目而无需切换回 commonjs

Answer 1

您可以通过将文件的后缀重命名为

.mjs

来解决此问题，以便将其解释为 ECMAScript 模块，之后导入应该按预期方式工作。

Peehaps 最一致的选择是也在 TypeScript 中编写 webpack 脚本，并使用以下命令运行它：

NODE_OPTIONS='--loader ts-node/esm --no-warnings' webpack --config webpack.config.ts