Javascript 如何使用Webpack''；进口有效吗？

我有一个React组件，我正在安装它，并将其作为我的项目中的node_模块导入。这个组件需要一个SVG，在我需要它之前通过babel传输到ES5

相关的传输代码如下所示

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _hudInline = require('./icons/hud.inline.svg');

var _hudInline2 = _interopRequireDefault(_hudInline);

_react2.default.createElement(_hudInline2.default, {
  className: 'FooterNav-hud-icon',
    style: {
    width: '16px',
    fill: 'white'
  }
})

我导入这段代码的主要项目有一个webpack配置，其中js文件有一个babel加载程序规则，svg文件有一个svg加载程序规则

如果我使用以下语法导入组件，它将正常工作：

import MyComponent from '!babel-loader!my_node_modules_folder/MyComponent';

我不明白为什么会这样。我假设使用“！”会绕过webpack配置并使用我定义的加载程序。但是，babel loader不应该知道如何处理SVG

如果我在webpack配置中删除我的svg加载器，上面！babel加载程序导入也不起作用。“！”是否仅对初始文件使用列出的加载程序，但当它遍历依赖关系树时，后续文件是否需要使用webpack配置

如果我不使用上述导入样式，但将我的网页包配置更改为不排除

/node\u modules/

，则代码不起作用。Webpack抱怨它不知道如何处理SVG（意外字符），这让我相信它没有找到正确的SVG加载程序

我是否误解了网页加载程序/需要如何工作？可能是因为最初传输的ES6->ES5弄乱了需求吗？

以下是我的js和svg加载程序选项

const babelLoader = {
  test: /\.jsx?$/,
  use: [{
    loader: require.resolve('babel-loader'),
    query: {
      babelrc: false,
      presets: [['es2015', { modules: false }], 'react', 'stage-0'],
      cacheDirectory: true
    }
  }]
};

const inlineSvgLoader = {
  test: /\.inline.svg$/,
  use: [{
    loader: 'babel-loader',
    query: {
      presets: ['es2015']
    }
  }, {
    loader: 'react-svg-loader',
    query: {
      jsx: true,
      ...
    };
}]

编辑：

我的问题是，尽管babel loader将我的包中的.js文件包含在node_模块中，但插件

webpack node externals

还需要将服务器端webpack构建中的模块列入白名单，以便将其包括在内

“！”是否仅对初始文件使用列出的加载程序，但当它遍历依赖关系树时，后续文件是否需要使用webpack配置

对。内联加载程序仅适用于包含要导入的模块的文件。否则，就不可能让该模块需要任何需要不同加载程序的内容

“！”是否仅对初始文件使用列出的加载程序，但当它遍历依赖关系树时，后续文件是否需要使用webpack配置

---

对。内联加载程序仅适用于包含要导入的模块的文件。否则，该模块将不可能需要任何需要不同加载程序的内容。

谢谢，这是有道理的。对于出于某种原因从节点\单元模块导入的文件，依赖项解析的工作方式是否有所不同？无法理解为什么从node_模块导入的组件不使用svg加载程序来满足其需求，这应该没有什么区别。也许你得改变装载机的顺序？我分不清哪一个是先戴的。我假设首先应用数组中的第一个，在这种情况下，您希望svg加载程序在babel-loader.Hmn之前运行，但它似乎没有做到这一点。尝试在我已经使用babel从jsx->es5传输过来的东西上运行webpack会有问题吗？无法想象会有这样的问题。可能问题是您没有在第二个babel loader实例中指定react预设？我假设svg加载器输出jsx。谢谢，这很有意义。对于出于某种原因从节点\单元模块导入的文件，依赖项解析的工作方式是否有所不同？无法理解为什么从node_模块导入的组件不使用svg加载程序来满足其需求，这应该没有什么区别。也许你得改变装载机的顺序？我分不清哪一个是先戴的。我假设首先应用数组中的第一个，在这种情况下，您希望svg加载程序在babel-loader.Hmn之前运行，但它似乎没有做到这一点。尝试在我已经使用babel从jsx->es5传输过来的东西上运行webpack会有问题吗？无法想象会有这样的问题。可能问题是您没有在第二个babel loader实例中指定react预设？我假设svg加载程序输出jsx。