SystemJSスタイルのインポート用カスタムWebpackリゾルバ！ with-loader

Question

私はSystemJSを使用しているプロジェクトを持っていますが、これは変更できません。また、WebPackを使用するStoryBookも使用しています。これも変更できません。これまでのところ、2人はお互いに非常によく遊びます。しかし、私はプレーンテキストとしてファイルをロードし、それらを解析するモジュールを持っている：

import stuff from './some-module!systemjs-plugin-text'; 
parseStuff(stuff); 

私のプロジェクトはWebPACKのを使用していた場合は、上記のコードは次のようになります。SystemJS "であるので

import stuff from 'raw-loader!./some-module'; 
parseStuff(stuff); 

プライマリ "モジュールローダーであり、私はすべてのアプリケーションコードをSystemJS中心にしておきたいと思います。私はWebpackのためのカスタムリゾルバを書いて、SystemJSスタイルのインポートを行い、それらを "フリップ"するようにしたいと思います。コードは次のようになります。

const moduleMap = { 
    'systemjs-plugin-text': 'raw-loader' 
}; 
const formatModuleIdForWebPack (systemjsId) { 
    const webpackId = systemjsId.split('!').reverse(); 
    webpackId[0] = moduleMap[ webpackId[0] ] || webpackId[0]; 
    return webpackId.join('!'); 
} 
formatModuleIdForWebPack('./some-module!systemjs-plugin-text'); 
//-> 'raw-loader!./some-module' 

私は、カスタムリゾルバ（hereとhere）を作成するためのいくつかの例を踏襲しているが、ペイロードのどれも私がリクエストオブジェクトを再構築するために必要なすべてのデータが含まれていません。 WebPackにフックする方法はありますか？私の目標を達成するために、モジュールの構文解析の初期段階で、非常に早い段階でを使用しますか？

Answer 1

目標を達成するためにカスタムローダーを使用することができました。これは理想的ではありませんが、解析ロジックはかなりシンプルであり、時間とともに強力にすることができます。この戦略を使用すると、プロジェクトファイル（ではなく、、node_modules）にのみこれを適用することができました。

{ 
    test: /\.js$/, 
    loader: path.resolve('systemjs-loader.js'), 
    exclude: [ 
     path.resolve('node_modules') 
    ], 
    options: { 
     loaderMap: { 
     'systemjs-plugin-text': 'raw-loader' 
     } 
    } 
    } 

...とローダコード：

const { getOptions } = require('loader-utils'); 
const escapeRegexp = require('escape-string-regexp'); 
/** 
* Replaces systemjs-style loader syntax with webpack-style: 
* 
* ./some-module!systemjs-plugin -> webpack-plugin!./some-module 
*/ 
module.exports = function (source) { 
    const options = getOptions(this); 
    const map = options.loaderMap; 
    if (!map) { 
    throw new Error('There is no need to use the systemjs loader without providing a `loaderMap`'); 
    } 
    Object.keys(map).forEach(loader => { 
    // indexOf should be faster than regex.test 
    if (source.indexOf(loader) !== -1) { 
     const exp = new RegExp(`(['"])([^!]+)!${escapeRegexp(loader)}['"]`, 'g'); 
     source = source.replace(exp, `$1${map[loader]}!$2$1`); 
    } 
    }); 
    return source; 
};