使用Webpack 5构建一个ES模块包，并在Node.js ES模块中使用该包。

Question

可以使用Webpack 5构建一个具有默认导出的ES模块捆绑包，然后在Node.js ES模块中消耗（导入）该捆绑包吗？

• 以下是以下文件的演示。

我有以下文件：

|- webpack.config.js
|- package.json
|- /src
  |- index.js

index.js

function util() {
    return "I'm a util!";
}
export default util;

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    experiments: {
        outputModule: true,
    },
};

package.json

{
  "name": "exporter",
  "version": "1.0.0",
  "module": "dist/index.js",
  "scripts": {
    "build": "webpack"
  }
}

运行npm run build命令后，我们得到：

|- webpack.config.js
|- package.json
|- /src
  |- index.js
|- /dist
  |- bundle.js

太好了，现在我只想创建一些“演示”文件importer.js，该文件将导入util并使用它。为方便起见，我将在同一个文件夹中创建它：

|- importer.js
|- webpack.config.js
|- package.json
|- /src
  |- index.js
|- /dist
  |- bundle.js

importer.js

import util from './dist/bundle.js';

console.log(util());

现在我运行node importer.js，并获得了这个（预期的）错误：

Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
[...]
SyntaxError: Cannot use import statement outside a module

好的，那么让我们在 package.json 中添加 "type": "module"：

package.json

{
  "name": "exporter",
  "version": "1.0.0",
  "module": "dist/index.js",
  "scripts": {
    "build": "webpack"
  },
  "type": "module"
}

现在，再次尝试运行node importer.js会出现另一个错误：

SyntaxError: The requested module './dist/bundle.js' does not provide an export named 'default'

此外，当尝试重新运行npm run build时，我们会遇到另一个错误：

[webpack-cli] Failed to load 'path\to\webpack.config.js' config
[webpack-cli] ReferenceError: require is not defined

• 注意：Webpack 5 和 ESM 可以被视为有些相关，但实际上并不是，因为它想要将 webpack.config.js 本身作为一个 ES 模块使用。

我该如何使它工作？

- OfirD

---

你正在使用哪个版本的webpack和webpack-cli？它们没有在你的package.json中列出。 - Dan O

我之所以问这个问题，是因为在使用webpack@^5.51.1和webpack-cli@^4.8.0时，当我尝试构建时，最终得到的bundle.js文件是空的。 - Dan O

@DanO，确实是这个结果，我也使用了那些版本。 - OfirD

Answer 1

由于您使用 type: "module"，Node.js 将把此模块视为 ESM。根据文档esm_no_require_exports_or_module_exports，在 ESM 中不可用require、module.exports和__dirname。我将使用 ESM 语法重写 webpack.config.js。

为__dirname变量创建一个 polyfill。

来自 webpack 的文档：

如果您正在使用 webpack 编译供其他人使用的库，请确保在output.module 为 true 时将 output.libraryTarget 设置为“module”。

例如：

webpack.config.js:

import path from "path";
import { fileURLToPath } from "url";

const __dirname = path.dirname(fileURLToPath(import.meta.url));

export default {
  mode: "development",     
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
    library: {
      type: "module",
    },
  },
  experiments: {
    outputModule: true,
  },
};

package.json:

{
  "name": "exporter",
  "version": "1.0.0",
  "main": "dist/bundle.js",
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0"
  },
  "type": "module"
}

./src/index.js:

function util() {
  return "I'm a util!";
}
export default util;

importer.js:

import util from "./dist/bundle.js";

console.log(util());

版本：

⚡  npm run build   

> exporter@1.0.0 build /Users/dulin/workspace/github.com/mrdulin/webpack-samples/packages/webpack-v5/stackoverflow/68913996
> webpack

asset bundle.js 3.01 KiB [compared for emit] [javascript module] (name: main)
runtime modules 670 bytes 3 modules
./src/index.js 65 bytes [built] [code generated]
webpack 5.51.1 compiled successfully in 87 ms

执行 importer.js 文件：

⚡  node importer.js 
I'm a util!

- Lin Du

---

我认为你在 package.json 中有一个小错误：应该是 "main": "dist/bundle.js" 或者 "module": "src/index.js"，详见这里。 - OfirD

也许你能够解答我的后续问题。 - OfirD

你提到应该使用 output.libraryTarget，但是在你的示例代码片段中没有使用它。 - Sh eldeeb