编译后修改文件的webpack插件

Question

我正在编写一个 Webpack 插件，该插件应该用 Webpack 生成的 CSS 文件列表替换部分 JS 代码。对这个 JS 代码进行成像:

ReactWebComponent.create(<App />, 'react-web-component', { injectReactWebComponent: true });

我要更换 injectReactWebComponent: true与

injectReactWebComponent: '<link href="static/css/main.cacbacc7.css" rel="stylesheet">'

而那个链接标签是一个由 Webpack 生成的文件。

我的(某种工作)代码如下:

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 ，但是加载器不知道生成的文件名，或者他们知道吗？

任何帮助，将不胜感激!

Answer 1

看起来这种事情很简单，可以由加载程序处理，其中有多个(有些比其他的好):

https://www.npmjs.com/package/string-replace-loader

https://www.npmjs.com/package/regexp-replace-loader

https://www.npmjs.com/package/replace-loader

如果你想制作自己的插件来做到这一点(我只是通过这个过程来做一些比正则表达式替换更复杂的事情)，我基本上可以从这三个页面中拼凑出我的解决方案:

https://github.com/webpack/webpack/blob/master/lib/BannerPlugin.js

https://webpack.js.org/api/plugins/compilation/#optimize-chunk-assets-chunks-chunk-async

https://github.com/webpack/webpack-sources