Question

我有一个React组件，我在项目中作为node_module安装和导入。该组件需要一个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';

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

如果我在webpack配置中删除了我的svg加载器，上面的！babel-loader导入也不起作用。是＆＃34;！＆＃34;只使用列出的加载器作为初始文件，但是当它遍历依赖关系树时，后续需要使用webpack配置吗？

如果我不使用上述导入样式，但将我的webpack配置更改为不排除/node_modules/，则代码不起作用。 Webpack抱怨它不知道如何处理SVG（意外的角色），让我相信它没有击中正确的svg-loader。

我是否误解了webpack加载器/需要如何工作？可能是因为最初编译的ES6 - ＆gt; 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包含了node_modules中我的包中的.js文件，但插件webpack-node-externals还需要将服务器端webpack构建中的模块列入白名单，以便包含它。

Answer 1

“！”只使用列出的加载器作为初始文件，但是当它遍历依赖关系树时，后续需要使用webpack配置吗？

是。内联加载器仅适用于包含要导入的模块的文件。否则就不可能让该模块需要任何需要不同加载器的东西。

如何做Webpack＆＃39;！＆＃39;进口工作？

1 个答案: