时间戳

首页 > 解决方案 > 如何在自定义 webpack 加载器中使用“导入”语句

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

问题描述

我正在尝试构建一个自定义 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 语句？

标签： webpackloaderwebpack-loader

解决方案

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

为什么它适用于文件加载器？因为，正如您在此处看到的，分发的文件已被编译/转译。

推荐阅读