Wie funktioniert Webpack '!' importiert Arbeit?

Question

Ich habe eine React-Komponente, die ich als node_module in meinem Projekt installiere und importiere. Diese Komponente benötigt ein SVG und wird über Babel zu ES5 transportiert, bevor ich es benötige.

Der relevante transpiled Code sieht so aus.

'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' 
    } 
}) 

Mein Hauptprojekt, das diesen Code importiert hat eine webpack Config, die eine babel loader Regel für js Dateien und eine SVG-loader-Regel für SVG-Dateien hat.

Wenn ich die Komponente mit dieser Syntax importieren funktioniert es:

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

Ich verstehe nicht, warum das funktioniert. Ich war unter der Annahme, dass "!" umgeht die Webpack-Konfiguration und verwendet die von mir definierten Loader. Babel-loader sollte jedoch nicht wissen, wie das SVG zu verarbeiten ist.

Wenn ich meinen SVG Loader in der Webpack-Konfiguration entferne, funktioniert der obige! Babel-loader-Import auch nicht. Tut "!" Verwenden Sie nur den aufgelisteten Loader für die Ausgangsdatei, aber wenn Sie den Abhängigkeitsbaum durchqueren, müssen Sie die webpack-Konfiguration verwenden.

Wenn ich den obigen Import-Stil nicht verwende, aber meine Webpack-Konfiguration ändern, um /node_modules/ NICHT auszuschließen, funktioniert der Code nicht. Webpack beschwert sich, dass es nicht weiß, wie es mit dem SVG umgehen soll (unerwartetes Zeichen), was mich glauben lässt, dass es nicht den richtigen SVG-Loader trifft.

Bin ich falsch verstanden, wie das Webpack Loaders funktioniert? Könnte es sein, dass die ursprünglich transpilierte ES6 -> ES5 die Anforderung vermasselt?

Hier sind meine js und svg Loader-Optionen

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:

Mein Problem war, dass einschließlich babel-loader trotz der Js-Dateien von meinem Paket in node_modules, das Plugin webpack-node-externals benötigt, um auch das Modul auf dem serverseitigen webpack build auf die weiße Liste zu setzen, damit es eingeschlossen wird.

Answer 1

Ist "!" Verwenden Sie nur den aufgelisteten Loader für die Ausgangsdatei, aber wenn Sie den Abhängigkeitsbaum durchqueren, müssen Sie die webpack-Konfiguration verwenden.

Ja. Inline-Loader gelten nur für die Datei, die das Modul enthält, das Sie importieren. Andernfalls wäre es nicht möglich, dass das Modul etwas benötigt, das einen anderen Loader benötigt.