javascript - Webpack '!' 导入如何工作？

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';

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

如果我在 webpack 配置中删除了 svg 加载器，上面的 !babel-loader 导入也不起作用。做 ”!”仅对初始文件使用列出的加载器，但当它遍历依赖树时，后续需要使用 webpack 配置吗？

如果我不使用上述导入样式，但将我的 webpack 配置更改为不排除 /node_modules/ ，则代码将不起作用。 Webpack 提示它不知道如何处理 SVG(意外字符)，这让我相信它没有找到正确的 svg-loader。

我是否误解了 webpack 加载器/需要如何工作？难道是因为原来转译的 ES6 -> ES5 搞乱了 require ？

这是我的 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

Does "!" only use the listed loader for the initial file, but as it traverses the dependency tree, subsequent requires use the webpack config?

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