如何在自定义 webpack 加载器中使用“导入”语句答案

【问题标题】：How to use 'import' statements in custom webpack loader如何在自定义 webpack 加载器中使用“导入”语句
【发布时间】：2019-04-28 00:15:51
【问题描述】：

我正在尝试构建一个自定义 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 配置为能够使用 import 语句？

【问题讨论】：

【解决方案1】：

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

为什么它适用于文件加载器？因为，如您所见here，分发的文件已编译/转译。

【讨论】：