0
私はWebPACKのの生成CSSファイルのリストをJSコードの一部を置き換える必要がありWebPACKのプラグインを書いていた後、ファイルを変更するプラグイン。これをイメージングすると、コードをJS：WebPACKのコンパイル
ReactWebComponent.create(<App />, 'react-web-component', { injectReactWebComponent: true });
私はそのリンクタグがWebPACKので生成されたファイルですが
injectReactWebComponent: '<link href="static/css/main.cacbacc7.css" rel="stylesheet">'
でinjectReactWebComponent: true部品を交換したいと思います。これは、次のようなコード
マイ（作業の一種）が行く：
ReactWebComponent.prototype.apply = function(compiler) {
compiler.plugin('emit', function(compilation, callback) {
const cssFiles = Object.keys(compilation.assets)
.filter(fileName => /\.css$/.test(fileName));
const jsFiles = Object.keys(compilation.assets)
.filter(fileName => /\.js$/.test(fileName));
const cssLinkTagsAsString = cssFiles
.map(fileName => `<link href="${fileName}" rel="stylesheet">`)
.join('');
jsFiles.forEach(fileName => {
compilation.assets[fileName].children.forEach(child => {
if (child._value) {
child._value = child._value.replace(/injectReactWebComponent\s*:\s*true/g, `injectReactWebComponent: \'${cssLinkTagsAsString}\'`);
}
});
});
callback();
});
};
module.exports = ReactWebComponent;
が、私はぶっきらぼうにソースを書き換えています
child._value = child._value.replace(...)
を行う行を参照してください。
しかし、これは私のために右のようではありません。私が変換しているコードはすでに生成されており、もはや変換されるべきではないようです。私はまた、これでソースマップを壊していると確信しています。
だから私は私がやっているものを達成するための適切な方法だろう何、疑問に思って？
私はloaderを使用する必要がありますが、ローダーは生成されたファイル名について知らないのですか？
助けていただけたら幸いです！