如何在自定义 webpack 加载器中使用 'import' 语句

Question

我正在尝试构建自定义 webpack 加载程序（以导入我的 json 文件中指定的所有内容）。

我的第一步是复制一些示例加载器（我选择了文件加载器）并将其注册为我的自定义加载器（在 webpack.config.js 中）：

rules: [{
    test: /\.(png|svg|jpg|gif)$/,
    use: [ { loader: path.resolve('asset-loader/index.js'), options: { } } ]
  },{

加载程序被正确拾取，但我在加载程序的第一条语句中遇到错误：

import path from 'path';

通过一些实验，我发现它无法理解 ES6 导入语法，而是期望“require('path').

这是为什么？正如我所说，我从 github 复制了文件加载器 - 它工作得很好。

有没有办法配置 webpack 使其能够使用导入语句？

Answer 1

您不能使用 esm 语法，因为节点还不允许。您必须将其解析为 cjs 才能被节点解释。

为什么它与文件加载器一起使用？因为，如你所见here，分发的文件是compiled/transpiled.

How to use 'import' statements in custom webpack loader