どのようにWebpack '！'輸入は機能しますか？

Question

プロジェクトにnode_moduleとしてインストールしてインポートするReactコンポーネントがあります。このコンポーネントはSVGを必要とし、私が必要とする前にバベルを介して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' 
    } 
}) 

私の主なプロジェクトは、JSファイルやSVGファイルのためのSVGローダールールのバベルローダールールを持っているのWebPACKの設定を持っています。

私はこの構文を使用してコンポーネントをインポートする場合、それは動作します：

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

この作品、なぜ私は理解していません。私は、 "！" webpackの設定をバイパスし、定義したローダーを使用します。しかし、babel-loaderはSVGの処理方法を知ってはいけません。

webpackの設定でsvgローダーを削除した場合、上記のbabel-loaderのインポートは機能しません。 "！"最初のファイルにはリストされたローダーのみを使用しますが、それが依存関係ツリーを横断するときには、その後webpack configを使用する必要がありますか？

上記のインポートスタイルを使用せず、ウェブパックの設定を除外しないように変更した場合/node_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, 
     ... 
    }; 
}] 

あるEDIT：

私の問題は、バベル・ローダーにもかかわらず、node_modulesでの私のパッケージからの.jsファイル、プラグインwebpack-node-externalsを含むということでしたそれが含まれるように、モジュール側のWebpackビルドでモジュールをホワイトリストする必要がありました。

Answer 1

"！"最初のファイルにはリストされたローダーのみを使用しますが、それが依存関係ツリーを横断するときには、その後webpack configを使用する必要がありますか？

はい。インラインローダーは、インポートするモジュールを含むファイルにのみ適用されます。それ以外の場合は、そのモジュールに別のローダを必要とするものを必要とすることはできません。